0%

CSS3实现三角和圆形图形技术

在本站的首页大家都看到了时间轴的展现方式吧,如图:

时间轴

这是可不是图片哦,是用CSS3代码写出来的,看下面两段代码:


.align-left::before {
position: absolute;
height: 0;
width: 0;
display: block;
border: 8px solid;
border-color: transparent transparent transparent white;
opacity: 0.1;
right: -16px;
top: 20px;
content: "";
}

.align-left::after {
content: "";
height: 8px;
width: 8px;
border-radius: 4px;
background: #3C9BFF;
opacity: 0.8;
display: block;
position: absolute;
right: -17px;
top: 24px;
}

如果懂CSS的人看了上面两段代码就很容易理解其原理,没错,三角是用到了border属性,圆用到是border-radius

先说三角,大家可以试一下这段代码:

1
<div style="width:0px; height:0px; border:30px solid; border-color:#ff3300 #0000ff #339966 #00ff00;"></div>

如图:

很容易明白了吧,当把DIV的宽高都设为0,然后就会出现这样的完全由边框构成的图形,其中等腰三角的高就是边框的border-width,

最后如果想让边框透明看不到,你可以把边框颜色设置成和背景色一样的,或者像我这样设成transparent;

再来说圆

同样试下下面的代码:

1
<div style="width:0px; height:0px; border:30px solid #0FF; border-radius:30px;"></div>

如图:

很简单,border-width和border-radius的值是一样的,就可以得到一个圆啦!