用css创建多边形按钮[复制]

Question

这个问题在这里已有答案：

• Responsive CSS Trapezoid Shape 2回答
• CSS inverted trapezium when width will differ 2回答

我希望只用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>

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>

进入css为a添加position:relative; display:inline-block;。因为，a高度为50px，“在”a下添加span元素。

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

使用这种方式你将使用基本的CSS。这将在IE7上运行。

Answer 3

这里更简单一点。如果你不喜欢这个，可以玩一些填充物。如需更多形状，请查看此line-height:50px;。

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%);
}