你的位置:首页 > 网页设计

[网页设计]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: 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);}

 

持续更新…………