下面的代码将在的正下方创建一个箭头<；a>元素：
JSFIDLE
.btn{
位置：相对位置；
显示：内联块；
宽度：100px；
高度：50px；
文本对齐：居中；
颜色：白色；
背景：灰色；
线高：50px；
文字装饰：无；
}
.btn:之后{
内容：“；
位置：绝对位置；
底部：-10px；
左：0；
宽度：0；
身高：0；
边框宽度：10px 50px 0 50px；
边框样式：实心；
边框颜色：灰色透明；
}<；a href=”“class=“btn”>；你好!</a>问题是，我们必须指示链接宽度才能得到一个合适大小的箭头，因为我们无法以像素为单位指示边框宽度
如何基于百分比创建响应三角形？
您可以使用倾斜和旋转的伪元素在链接下创建一个响应三角形：
演示（调整结果窗口大小以查看其反应）
三角形使用padding bottom属性保持其纵横比
如果希望形状根据其内容调整其大小，可以删除.btn类上的宽度
.btn{
位置：相对位置；
显示：内联块；
高度：50px；宽度：50%；
文本对齐：居中；
颜色：白色；
背景：灰色；
线高：50px；
文字装饰：无；
垫底：15%；
背景剪辑：内容框；
溢出：隐藏；
}
.btn:之后{
内容：“；
位置：绝对位置；
顶部：50px；左侧：0；
背景色：继承；
垫底：50%；
宽度：57.7%；
z指数：-1；
变换原点：0；
变换：旋转（-30度）斜X（30度）；
}
/**为了演示**/
身体{
背景：url（'http://i.imgur.com/qi5FGET.jpg');
背景尺寸：封面；
}<；a href=”“class=“btn”>；你好!</a>有关响应三角形以及如何制作它们的更多信息，您可以查看
带变换旋转的三角形（简单而奇特的响应三角形）