之前在懒懒分会上分享的一点关于border画小图的内容, 完整的ppt在这里.

原理 css盒模型 一个盒子包括: margin+border+padding+content – 上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到小三角, 小梯形等. – 调整宽度大小可以调节三角形形状. 示例1 一般情况下, 我们设置盒子的宽高度, 及上下左右边框, 会呈现如下图 #test1 { height:20px; width:20px; border-color:#FF9600 #3366ff #12