代码:

效果:

基本思路:

1.设置元素的高度为0(指针的高度从border-bottom开始计算)

2.设置指针的宽度

3.设置border-bottom(指针的高度由该属性的宽度决定,颜色有该元素的背景色决定)

4.设置border-left,border-right

由于width = content+padding+border,现在padding为0,

所以整个指针的宽度=content+border-left+border-right。

也就说:当border-left,border-right宽度变化时,content也在变化,但总体的宽度没变。

这样就会从上到下产生一个斜边。