1.采用的是均分原理
盒子都是一个矩形或正方形,从形状的中心,向4个角上下左右划分4个部分
2.代码的实现
第一步 保证元素是块级元素
第二步 设置元素的边框
第三步 不需要显示的边框使用透明色
示例代码
[css] view plain copy
.square{
width:0;
height:0;
margin:0 auto;
border:6px solid transparent;
border-top: 6px solid red;
}
效果图
加分项
描述自己的心得:在开发中我们也经常设计一个带缺口的三角形效果,如下图所示。
上图效果的做法是这样的:
1.、两个三角形(底边框)的位置、大小要一致
2、里面的三角形的底边框颜色为黑色(也可以为其它颜色),外面三角形边框颜色为白色的背景
3、白色三角形要覆盖黑色三角形就能形成这样的形状了,关于覆盖的问题可以使用标签的位置或z-index来改变。
html代码
[html] view plain copy
<div class="box b1"></div>
<div class="box b2"></div>
css代码
[css] view plain copy
.box{
position: absolute;
left: 0;
top: 0;
width: 0;
height:0;
border: 6px solid transparent;
}
.b1{
border-bottom-color:#000 ;
}
.b2{
border-bottom-color:#fff ;
}