下面的代码将在< a>元件：
.btn {
position: relative;
display: inline-block;
width: 100px;
height: 50px;
text-align: center;
color: white;
background: gray;
line-height: 50px;
text-decoration: none;
}
.btn:after {
content: "";
position: absolute;
bottom: -10px;
left: 0;
width: 0;
height: 0;
border-width: 10px 50px 0 50px;
border-style: solid;
border-color: gray transparent transparent transparent;
}
<a href="#" class="btn">Hello!</a>
问题是我们必须指出链接宽度以获得适当大小的箭头，因为我们无法指出边框宽度(以像素为单位)。
如何使基于百分比的响应三角形？
解决方法
您可以使用偏斜和旋转的伪元素在链接下创建响应三角形：
DEMO(调整结果窗口大小，看看它如何反应)
三角形的宽高比与padding-bottom属性保持一致。
如果您希望形状根据其内容适应其大小，则可以删除.btn类的宽度
.btn {
position: relative;
display: inline-block;
height: 50px; width: 50%;
text-align: center;
color: white;
background: gray;
line-height: 50px;
text-decoration: none;
padding-bottom: 15%;
background-clip: content-Box;
overflow: hidden;
}
.btn:after {
content: "";
position: absolute;
top:50px; left: 0;
background-color: inherit;
padding-bottom: 50%;
width: 57.7%;
z-index: -1;
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: rotate(-30deg) skewX(30deg);
-ms-transform: rotate(-30deg) skewX(30deg);
transform: rotate(-30deg) skewX(30deg);
}
/** FOR THE DEMO **/
body {
background: url('http://i.imgur.com/qi5FGET.jpg');
background-size: cover;
}
<a href="#" class="btn">Hello!</a>
有关响应三角形的更多信息以及如何制作它们，您可以看一下
Triangles with transform rotate(简单而花式的三角形)
