CSS画出的图_html/css_WEB-ITnose

目录 [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;} 

五角星

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

 　　


      
查看更多关于CSS画出的图_html/css_WEB-ITnose的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did110186