CSS画图

原理是利用边框实现，好处是不用加载图片，节省流量；坏处就是会有很长一段css样式

基本：1.设置width,height为0 ，然后设置一个border-width

利用border可以画很多有趣的图

 

 

1.正方形

?

1 2 3 4 5 6 7

#square{      width:0px;      height:0px;      border-width: 100px;      border-style: solid;      border-color: blue red green yellow; }

2.三角形：设置其他边颜色为透明值transparent

?

1 2 3 4 5 6 7

#triangle{      width : 0px ;      height : 0px ;      border-width : 100px ;      border-style : solid ;      border-color : blue transparent transparent transparent ; }

3.圆形：设置圆角属性border-radius

?

1 2 3 4 5 6 7 8

# circle {      width : 0px ;      height : 0px ;      border-width : 100px ;      border-style : solid ;      border-color : blue red green yellow;      border-radius: 100px ; }

4.扇形：同理设置透明色

?

1 2 3 4 5 6 7 8

#fan{      width : 0px ;      height : 0px ;      border-width : 100px ;      border-style : solid ;      border-color : transparent transparent transparent yellow;      border-radius: 100px ; }

5.同心圆:在圆的基础上添加width/height值

?

1 2 3 4 5 6

#circle- circle {      width : 200px ;      height : 200px ;      border : 50px solid red ;      border-radius: 200px ; }

5.半圆：利用border-radius分别设置左上角，右上角，右下角，左下角的值

?

1 2 3 4 5 6 7 8

#circle-half{      width : 200px ;      height : 100px ;      background-color : red ;      /*border-color: red;*/      /*border-style: solid;*/      border-radius: 100px 100px 0 0 ; }

6.四分之一圆：同半圆原理

?

1 2 3 4 5 6

#circle-double-half{      width : 200px ;      height : 200px ;      background-color : red ;      border-radius: 200px 0 0 0 ; }

7.小尾巴 :主要是在半圆的基础上添加某一侧的Border，border-top,border-right,border-left,border-bottom,大家阔以动手试一试

?

1 2 3 4 5 6 7 8

#tail{      width : 100px ;      height : 100px ;      border-radius: 100px 0 0 0 ;      border-top : 30px solid red ;      /*border-radius: 0 100px 0 0;      border-top: 30px solid red;*/ }

 8.提示框:用到了:after伪类去实现小尾巴的功能

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

#pop{      margin-top : 20px ;      width : 400px ;      height : 200px ;      border-radius: 20px ;      background-color : red ;      position : relative ; } #pop:after{      content : "" ;      height : 100px ;      width : 100px ;      border-radius: 0 0 200px 0 ;      border-right : 50px solid red ;      position : absolute ;      top : 180px ; }

9.椭圆:这里用到border-radius: 100px / 50px,其中"/"前面的表示水平半径(其值为width/2)，后面的表示垂直半径（其值为height/2）.

?

1 2 3 4 5 6 7

#ellipse{      margin-top : 20px ;      width : 200px ;      height : 100px ;      border-radius: 100px / 50px ;      background-color : red ; }

10.梯形：主要是理解Border属性，也就是第一幅图，梯形就比较容易画了

?

1 2 3 4 5 6 7 8

#trapezium {      height : 0 ;      width : 200px ;      border-bottom : 100px solid red ;      border-left : 50px solid transparent ;      border-right : 50px solid transparent ;   }

11.菱形：主要是用到旋转transform，不过要考虑到浏览器内核不同，要实现兼容，我这里就省略了

?

1 2 3 4 5 6

#diamond {      width : 100px ;      height : 100px ;      background-color : red ;      transform:rotate( -45 deg); }

12.平行四边形：也是主要用到transform,但菱形用的是skew,倾斜

?

1 2 3 4 5 6

#parallelogram {      width : 160px ;      height : 100px ;      background-color : red ;      transform:skew( 30 deg); }

13.五角星：主要是画三个三角形，通过旋转，然后拼接成一个五角星,各种画法自己去体会.....（可以通过不同的三角形去拼接，但原理是一样的）

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

#star{      width : 0 ;      height : 0 ;      color : red ;      position : relative ;      border-left : 100px solid transparent ;      border-right : 100px solid transparent ;      border-bottom : 70px solid red ;      transform:rotate( 35 deg); } #star:before{          content : '' ;      width : 0 ;      height : 0 ;      position : absolute ;      border-bottom : 80px solid red ;          border-left : 30px solid transparent ;          border-right : 30px solid transparent ;          top : -50px ;          left : -60px ;          transform:rotate( -35 deg); } #star:after{          content : "" ;      width : 0px ;      height : 0px ;      position : absolute ;      border-top : 70px solid red ;      border-left : 100px solid transparent ;      border-right : 100px solid transparent ;      left : -100px ;      transform:rotate( 110 deg); }

14：爱心：用菱形和胶囊拼接一个爱心形

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

#love{      position : relative ;      width : 100px ;      height : 100px ;      background-color : red ;      transform:rotate( 45 deg); } #love:before{      position : absolute ;      left : -75px ;      content : "" ;      width : 80px ;      height : 100px ;      background : red ;      border-radius: 50px 0 0 50px ; } #love:after{      position : absolute ;      left : 10px ;      top : -85px ;      content : "" ;      width : 80px ;      height : 100px ;      background : red ;      border-radius: 0 50px 50px 0 ;      transform:rotate( -90 deg); }

　　

转载于:https://www.cnblogs.com/7qin/p/10226883.html