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

五角星

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

<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画出的图)