关于css3+伪类实现各种三角形详解

in 学习记录 with 0 comment

关于三角形其实在工作中也挺常用的,但总是没抽时间去仔细看看...不巧之前面试还被问到了这个问题,自己回答的也挺含糊的。最近又用到了索性就弄明白顺便记录一下。

其实就是利用border这个属性,给有宽度的盒子4条边分别设置不同的颜色可以看出其实每条边都是相等的梯形。接着我们把盒子的宽度去掉,每条边就变成了直角三角形了,如果需要调整大小就设置边框的宽度就好了,改变位置就修改定位。还有其他的情况比如气泡框的时候也需要三角形,但只需要两条边,这个时候可以利用before,after伪类在大三角形内部定位一个小一点的(底边对齐,颜色为需要的背景色)三角形,这样你就能得到一个只有两边的了。

好了这次总结就这酱:)

RunJs源码
gist源码

Responses