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