CSS画出的图_html/css

来源：曲格情感

目录 [1]矩形 [2]圆形 [3]椭圆 [4]直角三角形 [5]正三角形 [6]平行四边形 [7]梯形 [8]六角星 [9]六边形 [10]五角星

简单图形

矩形

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;}

五角星

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

div { margin-left: 100px; position: relative; width: 0px; border: 50px solid transparent; border-width: 100px 35px; border-bottom-color: red; } div:after{ content: ""; position:absolute; width: 0; border: 100px solid transparent; border-width: 25px 50px; border-bottom-color: white; top: 51px; left: -50px;}div:last-child{ top: -1px; left: 52px; transform: rotate(72deg);}

持续更新…………