简单图形

矩形

div{    width: 100px;    height: 100px;    background-color: red;}

 

 

圆形

div{    width: 100px;    height: 100px;    background-color: red;    border-radius: 50%;}

 

 

椭圆

div{    width: 100px;    height: 50px;    background-color: red;    border-radius: 50%;}

 

 

直角三角形

div{    width: 0;    height: 0;    border: 50px solid transparent;    border-bottom-color: red;}

 

 

正三角形

div{    width: 0;    height: 0;    border: 50px solid transparent;    border-width: 86.6px 50px;    border-bottom-color: red;}

 

 

平行四边形

div{    margin-left: 50px;    width: 100px;    height: 100px;    background-color: red;    transform: skew(30deg);}

 

 

梯形

div{    width: 50px;    border: 50px solid transparent;    border-bottom-color: red;}

 

 

复杂图形

六角星

　　两个三角形叠压

div{    position: relative;    width: 0;    border: 50px solid transparent;    border-width: 50px 43.4px;    border-bottom-color: red;}div:after{    position: absolute;    content:"";    width: 0;    border: 50px solid transparent;    border-width: 50px 43.4px;    border-top-color: red;    top: 16px;    left: -42px;}

 

六边形

　　两个梯形拼接

div{    position: relative;    width: 50px;    border: 50px solid transparent;    border-bottom-color: red;}div:after{    position: absolute;    content:"";    width: 50px;    border: 50px solid transparent;    border-top-color: red;        top:50px;    left: -50px;}

 

五角星

　　一个大三角形底部掏掉一个小三角形；两个前面的相同图形叠压

　　经计算，五角星的夹角为36度，若小三角形的侧边为a，则大三角形的侧边为2a(1+sin18)，两个三角形共同的底边为2a(sin54)

<div class="box">

　　<div class="in"></div> 

　　<div class="in"></div>

</div>

.box{    position: relative;}.in{     margin-left: 100px;    position: relative;     width: 0px;     border: 10px solid transparent;     border-width: 249px 81px;    border-bottom-color: red;     position: absolute;} .in:after{    content: "";    position:absolute;    border: 10px solid transparent;    border-width: 59px 81px;    border-bottom-color: white;    top: 133px;    left: -81px;}.in:last-child{    top: 100px;    left: -134px;    transform: rotate(-73deg);}

 

桃心

　　创建一个方形div，分别用css控制div的两个伪元素平移到正方形相邻两边，圆形与边中点重合。最后将总的div旋转45度

 

 

持续更新…………