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

Question

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

对于display，不使用flex, table, ... 有解决方案

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 添加position:relative; display:inline-block; 的css。 因为，a 是 50px 的高度，“下”a 添加span 元素。

span 将使用position:absolute 和top:0; let:0; right:0 定位/填充到a，但是，我使用bottom:0 而不是height:50px;（来自aborder-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>