使用CSS创建多边形按钮

Question

我希望仅使用CSS创建以上按钮 但是，按钮文本i无法向上移动，与按钮对齐。 有想法吗？

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>

https://codepen.io/w3nta1/pen/aRMEzK

Answer 1

那是因为您的边框位于顶部。 这是一个工作示例：

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>

Answer 2

有些解决方案无需为flex使用table，display，...

body { padding:50px; }
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;
  position:relative;
  display:inline-block;
}
a span {
  position:absolute;
  left:0; right:0;
  top:-50px;
  height:50px;
  text-align:center;
  line-height:50px;
}

<a href="#"><span>Read More</span></a>
<a href="#"><span>About</span></a>

在a的CSS中添加position:relative; display:inline-block;。 由于a的高度为50px，因此在“ a下”下方添加span元素。

span将使用a和position:absolute定位/填充到top:0; let:0; right:0中，但是相反，bottom:0我使用height:50px;（来自您a border-top: 50px solid red !important;的css）。最后，将文本对齐到中心（text-align:center;）并使用line-height:50px;来使文本垂直居中。

使用这种方式，您将使用基本的CSS。这将在IE7上正常工作。

Answer 3

这里更简单。如果您不喜欢这种填充物，可以玩一些。 要获取更多形状，请选中此link。

body { padding: 100px; }

a{
  color: white;
  background: red;
  padding: 20px 40px;
  text-decoration: none;
  font-weight: bold;
  clip-path: polygon(0 0, 100% 0, 90% 100%, 10% 100%);
}

<a href="#">Hello World</a>