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: 50px 43.3px;  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;}

五角星

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

<body>　　<div></div>　　<div></div>    </body>

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: -164px;  left: 52px;  transform: rotate(72deg);}

持续更新…………

原标题：CSS画出的图

关键词：CSS