<分区>
html - 使用 CSS 创建多边形按钮
我希望只用 css 创建上面的按钮 但是，按钮文本我无法向上移动与按钮对齐。 有什么想法吗？
body {
padding: 100px;
}
a {
border-top: 50px solid red !important;
border-left: 25px solid transparent !important;
border-right: 25px solid transparent !important;
height: 0;
width: 150px;
font-size: 14px;
letter-spacing: 1px;
color: #000;
text-transform: uppercase;
text-decoration: none;
}<a href="#">Read More</a>最佳答案
那是因为边框在顶部。 这是一个工作示例:
body { padding:100px; }
a {
width: 200px;
font-size: 14px;
letter-spacing: 1px;
color:#000;
text-transform: uppercase;
text-decoration:none;
position: relative;
display: flex;
align-items: center;
}
a:before {
content: "";
border-top: 50px solid red !important;
border-left: 25px solid transparent !important;
border-right: 25px solid transparent !important;
width: 150px;
position:absolute;
}
span {
z-index: 10;
margin: 0 auto;
position: relative;
display: table;
color: white;
}<a href="#"><span>Read More</span></a>关于html - 使用 CSS 创建多边形按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53028690/