CSS画出的图

简单图形

矩形

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度

<style> div{ display:inline-block; margin:50px; height: 100px; width: 100px; background-color: red; transform: rotate(-45deg); } div:before,div:after{ display:block; content:""; width: 100px; height: 100px; background-color: red; border-radius: 50%; margin-top:-50%; } div:after{ margin-left:50%; } </style> <div></div>

 

持续更新…………