CSS绘制图标基础

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/diypp2012/article/details/52833256

CSS的功能不仅局限在调整元素样式上，绘制图形也是可行的。下面是其绘制图形的基本图形：

1. 三角形

.triangel {
width:0;
height:0;
border-top:10px solid red;
border-left:10px solid transparent;
border-right:10px solid transparent; 
}

2.圆形

.circle {
width:10px;
height:10px;
background: red;
border-radius: 10px;
}

3.梯形

.trapezoidal{
width:10px;
height:0px;
border-top:20px solid red;
border-left:10px solid transparent;
border-right:10px solid transparent;
}

4.平行四边形

.parallelogram{
width:20px;
height:20px;
border:1px solid red;
transform: skew(20deg,0);
-webkit-transform: skew(20deg,0);
-moz-transform: skew(20deg,0);
-ms-transform: skew(20deg,0);
-o-transform: skew(20deg,0);
}

其他的图形可以根据简单图形进行处理，拼接可以得出。CSS的强大还待继续学习，(*^__^*) 。