CSS3绘图 有更新!

Published on in 前端 with 679 views

CSS3绘图

用css3绘图的原理及各个图形的代码整理。

原理

请看图

5.pic.jpg

代码如下:

div {

  border-bottom: 300px solid #669;
  border-left: 210px solid green;
  border-right: 500px solid;
  height: 100px;
  width: 50px;
  border-top: 120px solid red;

}

为了方便理解,我把不同区域的长度都使用了一个不同的数值,对照css代码和图上的标示,大家应该能很清楚的明白我们绘图的原理。对于不需要它显示的边框,我们只需要设置一个transparent属性即可。

案例

Responses