您可以使用倾斜和旋转的伪元素在链接下创建一个 响应三角形 ：
三角形通过
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; transform-origin: 0 0; transform: rotate(-30deg) skewX(30deg);}body { background: url('http://i.imgur.com/qi5FGET.jpg'); background-size: cover;}<a href="#" >Hello!</a>
