三角形通过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-@R_714_2419@;
overflow: hidden;
}
.btn:after {
content: "";
position: absolute;
top:50px; left: 0;
background-color: inherit;
padding-bottom: 50%;
width: 57.7%;
z-index: -1;
transform-origin: 0 0;
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>
602392714
清零编程群