css画图

作者: 浮若年华_7a56 | 来源:发表于2018-07-25 20:26 被阅读0次

原理是利用边框实现，好处是不用加载图片，节省流量；坏处就是会有很长一段css样式
基本：1.设置width,height为0 ，然后设置一个border-width
利用border可以画很多有趣的图
1、绘制椭圆形

     /*border-radius是一种缩写方法。如果“/”前后的值都存在，
      * 那么“/”前面的值设置其水平半径，“/”后面值设置其垂直半径。
      * */

（1）

 #oval { width: 200px; height: 100px; 
     background: red; 
     -moz-border-radius: 100px / 50px;
     -webkit-border-radius: 100px / 50px; 
     border-radius: 100px / 50px;
      }

（2）

border-radius: 100px / 10px;

2、三角形

    #triangle-up {
        width: 0;
        height: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 100px solid red;
    }
    
    #triangle-topleft {
        width: 0;
        height: 0;
        border-top: 100px solid red;
        border-right: 100px solid transparent;
    }
    
    #triangle-topright {
        width: 0;
        height: 0;
        border-top: 100px solid red;
        border-left: 100px solid transparent;
    }
    
    #triangle-bottomleft {
        width: 0;
        height: 0;
        border-bottom: 100px solid red;
        border-right: 100px solid transparent;
    }
    
    #triangle-bottomright {
        width: 0;
        height: 0;
        border-bottom: 100px solid red;
        border-left: 100px solid transparent;
    }

3、箭头

（1）/普通箭头/
#normalarrow{position: relative;
width: 0;
height: 0;
border-top: 9px solid transparent;
border-right: 9px solid red;
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-ms-transform: rotate(10deg);
-o-transform: rotate(10deg);
}
#normalarrow:after {
content: "";
position: absolute;
border: 0 solid transparent;
border-top: 3px solid red;
top: -12px;
left: -9px;
width: 12px;
height: 12px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
}

（2） /右旋转箭头/
#curvedarrow {
position: relative;
width: 0;
height: 0;
border-top: 9px solid transparent;
border-right: 9px solid red;
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-ms-transform: rotate(10deg);
-o-transform: rotate(10deg);
}
#curvedarrow:after {
content: "";
position: absolute;
border: 0 solid transparent;
border-top: 3px solid red;
border-radius: 20px 0 0 0;
top: -12px;
left: -9px;
width: 12px;
height: 12px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
}

4、梯形
#trapezoid {
border-bottom: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px;
}

5、平行四边形
#parallelogram {
width: 150px;
height: 100px;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
/旋转角度/
background: red;
}

    /*六角星*/        
    #star-six {
        width: 0;
        height: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 100px solid red;
        position: relative;
    }
    
    #star-six:after {
        width: 0;
        height: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-top: 100px solid deepskyblue;
        position: absolute;
        content: "";
        top: 30px;
        left: -50px;
    }

6、五角星
#star-five {
margin: 50px 0;
position: relative;
color: red;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
-moz-transform: rotate(35deg);
-webkit-transform: rotate(35deg);
-ms-transform: rotate(35deg);
-o-transform: rotate(35deg);
}

    #star-five:before {
        border-bottom: 80px solid greenyellow;
        border-left: 30px solid transparent;
        border-right: 30px solid transparent;
        position: absolute;
        height: 0;
        width: 0;
        top: -45px;
        left: -65px;
        display: block;
        content: '';
        -webkit-transform: rotate(-35deg);
        -moz-transform: rotate(-35deg);
        -ms-transform: rotate(-35deg);
        -o-transform: rotate(-35deg);
    }
    
    #star-five:after {
        position: absolute;
        display: block;
        color: red;
        top: 3px;
        left: -105px;
        width: 0px;
        height: 0px;
        border-right: 100px solid transparent;
        border-bottom: 70px solid deepskyblue;
        border-left: 100px solid transparent;
        -webkit-transform: rotate(-70deg);
        -moz-transform: rotate(-70deg);
        -ms-transform: rotate(-70deg);
        -o-transform: rotate(-70deg);
        content: '';
    }

7、正五边形
#pentagon {
position: relative;
width: 54px;
border-width: 50px 18px 0;
border-style: solid;
border-color: red transparent;
}

    #pentagon:before {
        content: "";
        position: absolute;
        height: 0;
        width: 0;
        top: -85px;
        left: -18px;
        border-width: 0 45px 35px;
        border-style: solid;
        border-color: transparent transparent deepskyblue;
    }

8、正六边形
#hexagon {
width: 100px;
height: 55px;
background: red;
position: relative;
}

    #hexagon:before {
        content: "";
        position: absolute;
        top: -25px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 25px solid deepskyblue;
    }
    
    #hexagon:after {
        content: "";
        position: absolute;
        bottom: -25px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-top: 25px solid green;
    }

9、正八边形
#octagon {
width: 100px;
height: 100px;
background: red;
position: relative;
}

    #octagon:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        border-bottom: 29px solid red;
        border-left: 29px solid #eee;
        border-right: 29px solid #eee;
        width: 42px;
        height: 0;
    }
    
    #octagon:after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        border-top: 29px solid red;
        border-left: 29px solid #eee;
        border-right: 29px solid #eee;
        width: 42px;
        height: 0;
    }

10、心形
#heart {
position: relative;
width: 100px;
height: 90px;
}

    #heart:before,
    #heart:after {
        position: absolute;
        content: "";
        left: 50px;
        top: 0;
        width: 50px;
        height: 80px;
        background: red;
        -moz-border-radius: 50px 50px 0 0;
        border-radius: 50px 50px 0 0;
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
        -webkit-transform-origin: 0 100%;
        -moz-transform-origin: 0 100%;
        -ms-transform-origin: 0 100%;
        -o-transform-origin: 0 100%;
        transform-origin: 0 100%;
    }
    
    #heart:after {
        left: 0;
        background: greenyellow;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
        -webkit-transform-origin: 100% 100%;
        -moz-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
        -o-transform-origin: 100% 100%;
        transform-origin: 100% 100%;
    }

111、无穷符号
#infinity {
position: relative;
width: 212px;
height: 100px;
}

    #infinity:before,
    #infinity:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 60px;
        height: 60px;
        border: 20px solid red;
        -moz-border-radius: 50px 50px 0 50px;
        border-radius: 50px 50px 0 50px;
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
    
    #infinity:after {
        left: auto;
        right: 0;
        -moz-border-radius: 50px 50px 50px 0;
        border-radius: 50px 50px 50px 0;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
    }

12、棱形
#diamond {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom-color: red;
position: relative;
top: -50px;
}

    #diamond:after {
        content: '';
        position: absolute;
        left: -50px;
        top: 50px;
        width: 0;
        height: 0;
        border: 50px solid transparent;
        border-top-color: red;
    }

13、盾牌

    #diamond-shield {
        width: 0;
        height: 0;
        border: 50px solid transparent;
        border-bottom: 20px solid red;
        position: relative;
        top: -50px;
    }
    
    #diamond-shield:after {
        content: '';
        position: absolute;
        left: -50px;
        top: 20px;
        width: 0;
        height: 0;
        border: 50px solid transparent;
        border-top: 70px solid red;
    }

14、鸡蛋形状

    #egg {
    
        width: 126px;
        height: 180px;
        background-color: red;
        -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
        border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    }

15、吃豆人

    #pacman {
        width: 0px;
        height: 0px;
        border-right: 60px solid transparent;
        border-top: 60px solid red;
        border-left: 60px solid red;
        border-bottom: 60px solid red;
        border-top-left-radius: 60px;
        border-top-right-radius: 60px;
        border-bottom-left-radius: 60px;
        border-bottom-right-radius: 60px;
    }

16、对话框

    #talkbubble {
        width: 120px;
        height: 80px;
        background: red;
        position: relative;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px;
    }
    
    #talkbubble:before {
        content: "";
        position: absolute;
        right: 100%;
        top: 26px;
        width: 0;
        height: 0;
        border-top: 13px solid transparent;
        border-right: 26px solid red;
        border-bottom: 13px solid transparent;
    }

17、十二星星

    #burst-12 {
        background: red;
        width: 80px;
        height: 80px;
        position: relative;
        text-align: center;
    }
    
    #burst-12:before,
    #burst-12:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        height: 80px;
        width: 80px;
        background: red;
    }
    
    #burst-12:before {
        -webkit-transform: rotate(30deg);
        -moz-transform: rotate(30deg);
        -ms-transform: rotate(30deg);
        -o-transform: rotate(30deg);
    }
    
    #burst-12:after {
        -webkit-transform: rotate(60deg);
        -moz-transform: rotate(60deg);
        -ms-transform: rotate(60deg);
        -o-transform: rotate(60deg);
    }

18、八星星

    #burst-8 {
        background: red;
        width: 80px;
        height: 80px;
        position: relative;
        text-align: center;
        -webkit-transform: rotate(20deg);
        -moz-transform: rotate(20deg);
        -ms-transform: rotate(20deg);
        -o-transform: rotate(20eg);
    }
    
    #burst-8:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        height: 80px;
        width: 80px;
        background: red;
        -webkit-transform: rotate(135deg);
        -moz-transform: rotate(135deg);
        -ms-transform: rotate(135deg);
        -o-transform: rotate(135deg);
    }

19、阴阳

    #yin-yang {
        width: 96px;
        height: 48px;
        background: #eee;
        border-color: red;
        border-style: solid;
        border-width: 2px 2px 50px 2px;
        border-radius: 100%;
        position: relative;
    }
    
    #yin-yang:before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        background: #eee;
        border: 18px solid red;
        border-radius: 100%;
        width: 12px;
        height: 12px;
    }
    
    #yin-yang:after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        background: red;
        border: 18px solid #eee;
        border-radius: 100%;
        width: 12px;
        height: 12px;
    }

20、电视屏幕

    #tv {
        position: relative;
        width: 200px;
        height: 150px;
        margin: 20px 0;
        background: red;
        border-radius: 50% / 10%;
        color: white;
        text-align: center;
        text-indent: .1em;
    }
    
    #tv:before {
        content: '';
        position: absolute;
        top: 10%;
        bottom: 10%;
        right: -5%;
        left: -5%;
        background: #eee;
        border-radius: 5% / 50%;
    }

21、放大镜

    #magnifying-glass {
        font-size: 10em;
        /* This controls the size. */
        display: inline-block;
        width: 0.4em;
        height: 0.4em;
        border: 0.1em solid red;
        position: relative;
        border-radius: 0.35em;
    }
    
    #magnifying-glass::before {
        content: "";
        display: inline-block;
        position: absolute;
        right: -0.25em;
        bottom: -0.1em;
        border-width: 0;
        background: red;
        width: 0.35em;
        height: 0.08em;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
    }

22、月亮形状
#moon {
width: 80px;
height: 80px;
border-radius: 50%;
box-shadow: 15px 15px 0 0 red;
}

23、锥
#cone {
width: 0;
height: 0;
border-left: 70px solid transparent;
border-right: 70px solid transparent;
border-top: 100px solid red;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
24、加号

    #cross {
        background: red;
        height: 100px;
        position: relative;
        width: 20px;
    }
    
    #cross:after {
        background: red;
        content: "";
        height: 20px;
        left: -40px;
        position: absolute;
        top: 40px;
        width: 100px;
    }
  推荐一个网站：https://cssicon.space/#/icon/cloud-lightning 这里有更多的小图标

css画图

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读