CSS画出的图
简单图形
矩形
div{ width: 100px; height: 100px; background-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>
持续更新…………