本篇是以下两篇文章的转载和总结
纯CSS画基本形状
用CSS画三角形，普通版，文艺小阴影版~
1、画方形
width:100px;
height:100px;
background:red;
正方形
2、画正圆
width:100px;
height:100px;
background:red;
border-radius:50%;
正圆
3、画椭圆
width:200px;
height:100px;
background:red;
border-radius:100px / 50px;
椭圆
4、画个border理解图，再画三角形
width:100px;
height:100px;
background:#ddd;
border-top:30px solid red;
border-left:30px solid blue;
border-right:30px solid green;
border-bottom:30px solid black;
盒模型理解
接下来把盒模型的宽高都变成0
width:0;
height:0;
background:#ddd;
border-top:30px solid red;
border-left:30px solid blue;
border-right:30px solid green;
border-bottom:30px solid black;
宽高为0
然后把相应border的颜色改成transparent就可以看到三角形了
width:0;
height:0;
background:transparent;
border-top:30px solid red;
border-left:30px solid transparent;
border-right:30px solid transparent;
border-bottom:30px solid transparent;
三角形
width:0;
height:0;
background:transparent;
border-top:30px solid transparent;
border-left:30px solid blue;
border-right:30px solid transparent;
border-bottom:30px solid transparent;
三角形
当然，也可以这样，只需要更改相应的颜色就可以了。
width:0;
height:0;
background:transparent;
border-top:30px solid blue;
border-left:30px solid blue;
border-right:30px solid transparent;
border-bottom:30px solid transparent;
屏幕快照 2017-05-06 下午1.36.34.png
还可以改变高度成为这样：
width:0;
height:0;
background:transparent;
border-top:50px solid red;
border-left:30px solid transparent;
border-right:30px solid transparent;
border-bottom:30px solid transparent;
这样也可以的
那我们如何给这个三角形加个外阴影呢？用box-shadow试试看~
width:0;
height:0;
background:transparent;
border-top:50px solid red;
border-left:30px solid transparent;
border-right:30px solid transparent;
border-bottom:30px solid transparent;
box-shadow：0 0 5px rgba(0,0,0,0.9)
带阴影
阴影是出来了，但是并没有围绕着三角形，而是围绕着整个border显现出来。接下来按照抄来的一个思路来解决这个问题，大致的思路就是，用after来进行叠加以画出阴影效果。
div.child{
width:70px;
height:50px;
/* border:1px solid green; */
position:relative;
box-shadow:0 5px 3px -4px rgba(0,0,0,0.3);
overflow:hidden;
}
div.child:after{
content:'';
position:absolute;
width:50px;
height:50px;
border:1px solid red;
background:red;
box-shadow: 0 0 3px rgba(0,0,0,0.3);
left:9px;
top:30px;
transform:rotate(45deg);
}
这是效果
带阴影的三角形
先总结到这里，有时间再画平形四边形和其它形状。
