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

先说三角，大家可以试一下这段代码：

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

如图：

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

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

再来说圆：

同样试下下面的代码：

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

如图：

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