前段时间,有人问下面这个图的效果,怎么用css做出来,不用CSS3,兼容到IE7:
我起初也一头雾水,后来看到一个类似的案例,才恍然大悟。我们都知道,css的每条边相交的地方,都是三角,如果,将容器的宽高,设置为0,而边框非常粗,并且每条边颜色不同,就会得到下面的效果:
css代码:
.test{
width:0px;
height:0px;
border:100px solid red;
border-top-color:red;
border-bottom-color:blue;
border-right-color:orange;
border-left-color:black;
}
html代码:
如果将其中三条边的透明度设置为0,即,将上面的代码的三条边改成:
border-bottom-color:transparent;
border-left-color:transparent;
border-right-color:transparent;
那么就会得到下面的效果:
三角形已经出来了,那么想实现一开始的效果,就简单了,即再做一个比这个边框细一点的三角形,边框颜色为白色,盖在这个倒三角的上面,就能实现了,而且,兼容性非常好,效果图: