1.采用的是均分原理
非常有意思的是盒子都是一个矩形或正方形,从形状的中心,向4个角上下左右划分4个部
2.代码的实现
第一步 保证元素是块级元素
第二步 设置元素的边框
第三步 不需要显示的边框使用透明色
.square{
width:0;
height:0;
margin:0 auto;
border:6px solid transparent;
border-top: 6px solid red;
}
第二种写法:
.square{
width:0;
height:0;
margin:0 auto;
border-width:6px;
border-color:red transparent transparent transparent;
border-style:solid dashed dashed dashed;//为了兼容IE6,把没有的边框都设置为虚线
}
效果如下: