devbox
2023面试高手
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

css画各种图形_css画图形

作者：2023面试高手 | 2024-02-16 21:50:21

赞

踩

css画图形

1、Square(正方形)

 

  1. <!-- html -->
  2. <div id="square"></div>
  3.  
  4. <!-- css -->
  5. #square {
  6.     width: 100px;
  7.     height: 100px;
  8.     background: red;
  9. }

 

2、Rectangle(矩形)

 

  1. <!-- html -->
  2. <div id="rectangle"></div>
  3.  
  4. <!-- css -->
  5. #rectangle {
  6.     width: 200px;
  7.     height: 100px;
  8.     background: red;
  9. }

 

3、Circle(圆形)

 

  1. <!-- html -->
  2. <div id="circle"></div>
  3.  
  4. <!-- css -->
  5. #circle {
  6.     width: 100px;
  7.     height: 100px;
  8.     background: red;
  9.     border-radius: 50px;
  10. }

 

4、Oval(椭圆形)

 

  1. <!-- html -->
  2. <div id="oval"></div>
  3.  
  4. <!-- css -->
  5. #oval {
  6.     width: 200px;
  7.     height: 100px;
  8.     background: red;
  9.     border-radius: 100px / 50px;
  10. }

 

5、Egg(鸡蛋)

 

  1. <!-- html -->
  2. <div id="egg"></div>
  3.  
  4. <!-- css -->
  5. #egg {
  6.    display:block;
  7.    width: 126px;
  8.    height: 180px;
  9.    background-color: red;
  10.    -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
  11.    border-radius:         50%  50%  50%  50%  / 60%   60%   40%  40%;
  12. }

6、Trapezoid(梯形)

  1. <!-- html -->
  2. <div id="trapezoid"></div>
  3.  
  4. <!-- css -->
  5. #trapezoid {
  6.     border-bottom: 100px solid red;
  7.     border-left: 50px solid transparent;
  8.     border-right: 50px solid transparent;
  9.     height: 0;
  10.     width: 100px;
  11. }

 

7、Parallelogram(平行四边形)

 

  1. <!-- html -->
  2. <div id="parallelogram"></div>
  3.  
  4. <!-- css -->
  5. #parallelogram {
  6.     width: 120px;
  7.     height: 100px;
  8.     -webkit-transform: skew(20deg);
  9.        -moz-transform: skew(20deg);
  10.          -o-transform: skew(20deg);
  11.     background: red;
  12. }

 

8、Diamond Square(菱形)

  1. <!-- html -->
  2. <div id="diamond"></div>
  3.  
  4. <!-- css -->
  5. #diamond {
  6.     width: 0;
  7.     height: 0;
  8.     border: 50px solid transparent;
  9.     border-bottom-color: red;
  10.     position: relative;
  11.     top: -50px;
  12. }
  13. #diamond:after {
  14.     content: '';
  15.     position: absolute;
  16.     left: -50px;
  17.     top: 50px;
  18.     width: 0;
  19.     height: 0;
  20.     border: 50px solid transparent;
  21.     border-top-color: red;
  22. }

 

9、Diamond Narrow(方块)

  1. <!-- html -->
  2. <div id="diamond-narrow"></div>
  3.  
  4. <!-- css -->
  5. #diamond-narrow {
  6.     width: 0;
  7.     height: 0;
  8.     border: 50px solid transparent;
  9.     border-bottom: 70px solid red;
  10.     position: relative;
  11.     top: -50px;
  12. }
  13. #diamond-narrow:after {
  14.     content: '';
  15.     position: absolute;
  16.     left: -50px; top: 70px;
  17.     width: 0;
  18.     height: 0;
  19.     border: 50px solid transparent;
  20.     border-top: 70px solid red;
  21. }

10、Pentagon(五边形)

 

  1. <!-- html -->
  2. <div id="pentagon"></div>
  3.  
  4. <!-- css -->
  5. #pentagon {
  6. 	margin: 100px;
  7.     position: relative;
  8.     width: 54px;
  9.     border-width: 50px 18px 0;
  10.     border-style: solid;
  11.     border-color: red transparent;
  12. }
  13. #pentagon:before {
  14.     content: "";
  15.     position: absolute;
  16.     height: 0;
  17.     width: 0;
  18.     top: -85px;
  19.     left: -18px;
  20.     border-width: 0 45px 35px;
  21.     border-style: solid;
  22.     border-color: transparent transparent red;
  23. }

 

11、Hexagon(六边形)

  1. <!-- html -->
  2. <div id="hexagon"></div>
  3.  
  4. <!-- css -->
  5. #hexagon {
  6. 	margin: 100px;
  7.     width: 100px;
  8.     height: 55px;
  9.     background: red;
  10.     position: relative;
  11. }
  12. #hexagon:before {
  13.     content: "";
  14.     position: absolute;
  15.     top: -25px;
  16.     left: 0;
  17.     width: 0;
  18.     height: 0;
  19.     border-left: 50px solid transparent;
  20.     border-right: 50px solid transparent;
  21.     border-bottom: 25px solid red;
  22. }
  23. #hexagon:after {
  24.     content: "";
  25.     position: absolute;
  26.     bottom: -25px;
  27.     left: 0;
  28.     width: 0;
  29.     height: 0;
  30.     border-left: 50px solid transparent;
  31.     border-right: 50px solid transparent;
  32.     border-top: 25px solid red;
  33. }

 

12、Octagon(八边形)

  1. <!-- html -->
  2. <div id="hexagon"></div>
  3.  
  4. <!-- css -->
  5. #octagon {
  6.     width: 100px;
  7.     height: 100px;
  8.     background: red;
  9.     position: relative;
  10. }
  11.  
  12. #octagon:before {
  13.     content: "";
  14.     position: absolute;
  15.     top: 0;
  16.     left: 0;
  17.     border-bottom: 29px solid red;
  18.     border-left: 29px solid #fff;
  19.     border-right: 29px solid #fff;
  20.     width: 42px;
  21.     height: 0;
  22. }
  23.  
  24. #octagon:after {
  25.     content: "";
  26.     position: absolute;
  27.     bottom: 0;
  28.     left: 0;
  29.     border-top: 29px solid red;
  30.     border-left: 29px solid #fff;
  31.     border-right: 29px solid #fff;
  32.     width: 42px;
  33.     height: 0;
  34. }

 

13、三角形

①Triangle Up(向上的三角形)

  1. <!-- html -->
  2. <div id="triangle-up"></div>
  3.  
  4. <!-- css -->
  5. #triangle-up {
  6.     width: 0;
  7.     height: 0;
  8.     border-left: 50px solid transparent;
  9.     border-right: 50px solid transparent;
  10.     border-bottom: 100px solid red;
  11. }

 

②Triangle Down(向下的三角形)

  1. <!-- html -->
  2. <div id="triangle-down"></div>
  3.  
  4. <!-- css -->
  5. #triangle-down {
  6.     width: 0;
  7.     height: 0;
  8.     border-left: 50px solid transparent;
  9.     border-right: 50px solid transparent;
  10.     border-top: 100px solid red;
  11. }

 

③Triangle Left(向左的三角形)

 

  1. <!-- html -->
  2. <div id="triangle-left"></div>
  3.  
  4. <!-- css -->
  5. #triangle-left {
  6.     width: 0;
  7.     height: 0;
  8.     border-top: 50px solid transparent;
  9.     border-bottom: 50px solid transparent;
  10.     border-right: 100px solid red;
  11. }

 

④Triangle Right(向右的三角形)

  1. <!-- html -->
  2. <div id="triangle-right"></div>
  3.  
  4. <!-- css -->
  5. #triangle-right {
  6.     width: 0;
  7.     height: 0;
  8.     border-top: 50px solid transparent;
  9.     border-left: 100px solid red;
  10.     border-bottom: 50px solid transparent;
  11. }

 

⑤Triangle Top Left(左上的三角形)

  1. <!-- html -->
  2. <div id="triangle-top-left"></div>
  3.  
  4. <!-- css -->
  5. #triangle-top-left {
  6.     width: 0;
  7.     height: 0;
  8.     border-top: 100px solid red;
  9.     border-right: 100px solid transparent;
  10. }

 

⑥Triangle Top Right(右上的三角形)

  1. <!-- html -->
  2. <div id="triangle-top-right"></div>
  3.  
  4. <!-- css -->
  5. #triangle-top-right {
  6.     width: 0;
  7.     height: 0;
  8.     border-top: 100px solid red;
  9.     border-left: 100px solid transparent;
  10. }

 

⑦Triangle Bottom Left(左下的三角形)

  1. <!-- html -->
  2. <div id="triangle-bottom-left"></div>
  3.  
  4. <!-- css -->
  5. #triangle-bottom-left {
  6.     width: 0;
  7.     height: 0;
  8.     border-bottom: 100px solid red;
  9.     border-right: 100px solid transparent;
  10. }

 

⑧Triangle Bottom Right(右下的三角形)

  1. <!-- html -->
  2. <div id="triangle-bottom-right"></div>
  3.  
  4. <!-- css -->
  5. #triangle-bottom-right {
  6.     width: 0;
  7.     height: 0;
  8.     border-bottom: 100px solid red;
  9.     border-left: 100px solid transparent;
  10. }

 

14、Star (5-points)(五角星)

  1. <!-- html -->
  2. <div id="star-five"></div>
  3.  
  4. <!-- css -->
  5. #star-five {
  6.    margin: 100px 0;
  7.    position: relative;
  8.    display: block;
  9.    color: red;
  10.    width: 0px;
  11.    height: 0px;
  12.    border-right:  100px solid transparent;
  13.    border-bottom: 70px  solid red;
  14.    border-left:   100px solid transparent;
  15.    -moz-transform:    rotate(35deg);
  16.    -webkit-transform: rotate(35deg);
  17.    -ms-transform:     rotate(35deg);
  18.    -o-transform:      rotate(35deg);
  19. }
  20. #star-five:before {
  21.    border-bottom: 80px solid red;
  22.    border-left: 30px solid transparent;
  23.    border-right: 30px solid transparent;
  24.    position: absolute;
  25.    height: 0;
  26.    width: 0;
  27.    top: -45px;
  28.    left: -65px;
  29.    display: block;
  30.    content: '';
  31.    -webkit-transform: rotate(-35deg);
  32.    -moz-transform:    rotate(-35deg);
  33.    -ms-transform:     rotate(-35deg);
  34.    -o-transform:      rotate(-35deg);
  35.  
  36. }
  37. #star-five:after {
  38.    position: absolute;
  39.    display: block;
  40.    color: red;
  41.    top: 3px;
  42.    left: -105px;
  43.    width: 0px;
  44.    height: 0px;
  45.    border-right: 100px solid transparent;
  46.    border-bottom: 70px solid red;
  47.    border-left: 100px solid transparent;
  48.    -webkit-transform: rotate(-70deg);
  49.    -moz-transform:    rotate(-70deg);
  50.    -ms-transform:     rotate(-70deg);
  51.    -o-transform:      rotate(-70deg);
  52.    content: '';
  53. }

 

15、Star (6-points)(六角星)

  1. <!-- html -->
  2. <div id="star-six"></div>
  3.  
  4. <!-- css -->
  5. #star-six {
  6.     width: 0;
  7.     height: 0;
  8.     border-left: 50px solid transparent;
  9.     border-right: 50px solid transparent;
  10.     border-bottom: 100px solid red;
  11.     position: relative;
  12. }
  13. #star-six:after {
  14.     width: 0;
  15.     height: 0;
  16.     border-left: 50px solid transparent;
  17.     border-right: 50px solid transparent;
  18.     border-top: 100px solid red;
  19.     position: absolute;
  20.     content: "";
  21.     top: 30px;
  22.     left: -50px;
  23. }

 

16、Diamond Shield（钻石盾牌）

  1. <!-- html -->
  2. <div id="diamond-shield"></div>
  3.  
  4. <!-- css -->
  5. #diamond-shield {
  6.     width: 0;
  7.     height: 0;
  8.     border: 50px solid transparent;
  9.     border-bottom: 20px solid red;
  10.     position: relative;
  11.     top: -50px;
  12. }
  13. #diamond-shield:after {
  14.     content: '';
  15.     position: absolute;
  16.     left: -50px; top: 20px;
  17.     width: 0;
  18.     height: 0;
  19.     border: 50px solid transparent;
  20.     border-top: 70px solid red;
  21. }

 

17、Cut Diamond(砖石形)

  1. <!-- html -->
  2. <div id="cut-diamond"></div>
  3.  
  4. <!-- css -->
  5. #cut-diamond {
  6.     border-style: solid;
  7.     border-color: transparent transparent red transparent;
  8.     border-width: 0 25px 25px 25px;
  9.     height: 0;
  10.     width: 50px;
  11.     position: relative;
  12.     margin: 20px 0 50px 0;
  13. }
  14. #cut-diamond:after {
  15.     content: "";
  16.     position: absolute;
  17.     top: 25px;
  18.     left: -25px;
  19.     width: 0;
  20.     height: 0;
  21.     border-style: solid;
  22.     border-color: red transparent transparent transparent;
  23.     border-width: 70px 50px 0 50px;
  24. }

 

18、Cone(圆锥形)

  1. <!-- html -->
  2. <div id="cone"></div>
  3.  
  4. <!-- css -->
  5. #cone {
  6.   width: 0;
  7.   height: 0;
  8.   border-left: 70px solid transparent;
  9.   border-right: 70px solid transparent;
  10.   border-top: 100px solid red;
  11.   -moz-border-radius: 50%;
  12.   -webkit-border-radius: 50%;
  13.   border-radius: 50%;
  14. }

19、Point Burst（爆炸形状）

  1. <!-- html -->
  2. <div id="point-burst"></div>
  3.  
  4. <!-- css -->
  5. #point-burst {
  6. 	margin: 100px;
  7.     background: red;
  8.     width: 80px;
  9.     height: 80px;
  10.     position: relative;
  11.     text-align: center;
  12. }
  13. #point-burst:before, #point-burst:after {
  14.     content: "";
  15.     position: absolute;
  16.     top: 0;
  17.     left: 0;
  18.     height: 80px;
  19.     width: 80px;
  20.     background: red;
  21. }
  22. #point-burst:before {
  23.     -webkit-transform: rotate(30deg);
  24.        -moz-transform: rotate(30deg);
  25.         -ms-transform: rotate(30deg);
  26.          -o-transform: rotate(30deg);
  27. }
  28. #point-burst:after {
  29.     -webkit-transform: rotate(60deg);
  30.        -moz-transform: rotate(60deg);
  31.         -ms-transform: rotate(60deg);
  32.          -o-transform: rotate(60deg);
  33. }

 

20、Pac-Man(吃豆人)

  1. <!-- html -->
  2. <div id="pacman"></div>
  3.  
  4. <!-- css -->
  5. #pacman {
  6.   width: 0px;
  7.   height: 0px;
  8.   border-right: 60px solid transparent;
  9.   border-top: 60px solid red;
  10.   border-left: 60px solid red;
  11.   border-bottom: 60px solid red;
  12.   border-top-left-radius: 60px;
  13.   border-top-right-radius: 60px;
  14.   border-bottom-left-radius: 60px;
  15.   border-bottom-right-radius: 60px;
  16. }

21、TV Screen（电视屏幕）

  1. <!-- html -->
  2. <div id="tv"></div>
  3.  
  4. <!-- css -->
  5. #tv {
  6.   margin-left: 100px;
  7.   position: relative;
  8.   width: 200px;
  9.   height: 150px;
  10.   background: red;
  11.   border-radius: 50% / 10%;
  12.   color: white;
  13.   text-align: center;
  14.   text-indent: .1em;
  15. }
  16. #tv:before {
  17.   content: '';
  18.   position: absolute;
  19.   top: 10%;
  20.   bottom: 10%;
  21.   right: -5%;
  22.   left: -5%;
  23.   background: inherit;
  24.   border-radius: 5% / 50%;
  25. }

 

22、Chevron（雪佛龙）

  1. <!-- html -->
  2. <div id="chevron"></div>
  3.  
  4. <!-- css -->
  5. #chevron {
  6.   position: relative;
  7.   text-align: center;
  8.   padding: 12px;
  9.   margin-bottom: 6px;
  10.   height: 60px;
  11.   width: 200px;
  12. }
  13.  
  14. #chevron:before {
  15.   content: '';
  16.   position: absolute;
  17.   top: 0;
  18.   left: 0;
  19.   height: 100%;
  20.   width: 51%;
  21.   background: red;
  22.   -webkit-transform: skew(0deg, 6deg);
  23.   -moz-transform: skew(0deg, 6deg);
  24.   -ms-transform: skew(0deg, 6deg);
  25.   -o-transform: skew(0deg, 6deg);
  26.   transform: skew(0deg, 6deg);
  27. }
  28. #chevron:after {
  29.   content: '';
  30.   position: absolute;
  31.   top: 0;
  32.   right: 0;
  33.   height: 100%;
  34.   width: 50%;
  35.   background: red;
  36.   -webkit-transform: skew(0deg, -6deg);
  37.   -moz-transform: skew(0deg, -6deg);
  38.   -ms-transform: skew(0deg, -6deg);
  39.   -o-transform: skew(0deg, -6deg);
  40.   transform: skew(0deg, -6deg);
  41. }

 

23、Talk Bubble（聊天框）

  1. <!-- html -->
  2. <div id="talkbubble"></div>
  3.  
  4. <!-- css -->
  5. #talkbubble {
  6.    margin: 100px;
  7.    width: 120px;
  8.    height: 80px;
  9.    background: red;
  10.    position: relative;
  11.    -moz-border-radius:    10px;
  12.    -webkit-border-radius: 10px;
  13.    border-radius: 10px;
  14. }
  15. #talkbubble:before {
  16.    content:"";
  17.    position: absolute;
  18.    right: 100%;
  19.    top: 26px;
  20.    width: 0;
  21.    height: 0;
  22.    border-top: 13px solid transparent;
  23.    border-right: 26px solid red;
  24.    border-bottom: 13px solid transparent;
  25. }

 

24、Magnifying Glass（放大镜）

  1. <!-- html -->
  2. <div id="magnifying-glass"></div>
  3.  
  4. <!-- css -->
  5. #magnifying-glass{
  6.  font-size: 10em; /* This controls the size. */
  7.  display: inline-block;
  8.  width: 0.4em;
  9.  height: 0.4em;
  10.  border: 0.1em solid red;
  11.  position: relative;
  12.  border-radius: 0.35em;
  13. }
  14. #magnifying-glass::before{
  15.  content: "";
  16.  display: inline-block;
  17.  position: absolute;
  18.  right: -0.25em;
  19.  bottom: -0.1em;
  20.  border-width: 0;
  21.  background: red;
  22.  width: 0.35em;
  23.  height: 0.08em;
  24.  -webkit-transform: rotate(45deg);
  25.     -moz-transform: rotate(45deg);
  26.      -ms-transform: rotate(45deg);
  27.       -o-transform: rotate(45deg);
  28. }

 

25、Heart(心形)

  1. <!-- html -->
  2. <div id="heart"></div>
  3.  
  4. <!-- css -->
  5. #heart {
  6.     position: relative;
  7.     width: 100px;
  8.     height: 90px;
  9. }
  10. #heart:before,
  11. #heart:after {
  12.     position: absolute;
  13.     content: "";
  14.     left: 50px;
  15.     top: 0;
  16.     width: 50px;
  17.     height: 80px;
  18.     background: red;
  19.     -moz-border-radius: 50px 50px 0 0;
  20.     border-radius: 50px 50px 0 0;
  21.     -webkit-transform: rotate(-45deg);
  22.        -moz-transform: rotate(-45deg);
  23.         -ms-transform: rotate(-45deg);
  24.          -o-transform: rotate(-45deg);
  25.             transform: rotate(-45deg);
  26.     -webkit-transform-origin: 0 100%;
  27.        -moz-transform-origin: 0 100%;
  28.         -ms-transform-origin: 0 100%;
  29.          -o-transform-origin: 0 100%;
  30.             transform-origin: 0 100%;
  31. }
  32. #heart:after {
  33.     left: 0;
  34.     -webkit-transform: rotate(45deg);
  35.        -moz-transform: rotate(45deg);
  36.         -ms-transform: rotate(45deg);
  37.          -o-transform: rotate(45deg);
  38.             transform: rotate(45deg);
  39.     -webkit-transform-origin: 100% 100%;
  40.        -moz-transform-origin: 100% 100%;
  41.         -ms-transform-origin: 100% 100%;
  42.          -o-transform-origin: 100% 100%;
  43.             transform-origin :100% 100%;
  44. }

 

 26、Infinity(无限符图形)

  1. <!-- html -->
  2. <div id="infinity"></div>
  3.  
  4. <!-- css -->
  5. #infinity {
  6.     position: relative;
  7.     width: 212px;
  8.     height: 100px;
  9. }
  10.  
  11. #infinity:before,
  12. #infinity:after {
  13.     content: "";
  14.     position: absolute;
  15.     top: 0;
  16.     left: 0;
  17.     width: 60px;
  18.     height: 60px;
  19.     border: 20px solid red;
  20.     -moz-border-radius: 50px 50px 0 50px;
  21.          border-radius: 50px 50px 0 50px;
  22.     -webkit-transform: rotate(-45deg);
  23.        -moz-transform: rotate(-45deg);
  24.         -ms-transform: rotate(-45deg);
  25.          -o-transform: rotate(-45deg);
  26.             transform: rotate(-45deg);
  27. }
  28.  
  29. #infinity:after {
  30.     left: auto;
  31.     right: 0;
  32.     -moz-border-radius: 50px 50px 50px 0;
  33.          border-radius: 50px 50px 50px 0;
  34.     -webkit-transform: rotate(45deg);
  35.        -moz-transform: rotate(45deg);
  36.         -ms-transform: rotate(45deg);
  37.          -o-transform: rotate(45deg);
  38.             transform: rotate(45deg);
  39. }

 

 27、Yin Yang(阴阳八卦)

  1. <!-- html -->
  2. <div id="yin-yang"></div>
  3.  
  4. <!-- css -->
  5. #yin-yang {
  6.     width: 96px;
  7.     height: 48px;
  8.     background: #eee;
  9.     border-color: red;
  10.     border-style: solid;
  11.     border-width: 2px 2px 50px 2px;
  12.     border-radius: 100%;
  13.     position: relative;
  14. }
  15.  
  16. #yin-yang:before {
  17.     content: "";
  18.     position: absolute;
  19.     top: 50%;
  20.     left: 0;
  21.     background: #eee;
  22.     border: 18px solid red;
  23.     border-radius: 100%;
  24.     width: 12px;
  25.     height: 12px;
  26. }
  27.  
  28. #yin-yang:after {
  29.     content: "";
  30.     position: absolute;
  31.     top: 50%;
  32.     left: 50%;
  33.     background: red;
  34.     border: 18px solid #eee;
  35.     border-radius:100%;
  36.     width: 12px;
  37.     height: 12px;
  38. }

 

28、 Badge Ribbon(徽章丝带)

  1. <!-- html -->
  2. <div id="badge-ribbon"></div>
  3.  
  4. <!-- css -->
  5. #badge-ribbon {
  6.  position: relative;
  7.  background: red;
  8.  height: 100px;
  9.  width: 100px;
  10.  -moz-border-radius:    50px;
  11.  -webkit-border-radius: 50px;
  12.  border-radius:         50px;
  13. }
  14.  
  15. #badge-ribbon:before,
  16. #badge-ribbon:after {
  17.   content: '';
  18.   position: absolute;
  19.   border-bottom: 70px solid red;
  20.   border-left: 40px solid transparent;
  21.   border-right: 40px solid transparent;
  22.   top: 70px;
  23.   left: -10px;
  24.   -webkit-transform: rotate(-140deg);
  25.   -moz-transform:    rotate(-140deg);
  26.   -ms-transform:     rotate(-140deg);
  27.   -o-transform:      rotate(-140deg);
  28. }
  29.  
  30. #badge-ribbon:after {
  31.   left: auto;
  32.   right: -10px;
  33.   -webkit-transform: rotate(140deg);
  34.   -moz-transform:    rotate(140deg);
  35.   -ms-transform:     rotate(140deg);
  36.   -o-transform:      rotate(140deg);
  37. }

 

 29、Space Invader（太空入侵者）

  1. <!-- html -->
  2. <div id="space-invader"></div>
  3.  
  4. <!-- css -->
  5. #space-invader{
  6.   box-shadow:
  7.     0 0 0 1em red,
  8.     0 1em 0 1em red,
  9.     -2.5em 1.5em 0 .5em red,
  10.     2.5em 1.5em 0 .5em red,
  11.     -3em -3em 0 0 red,
  12.     3em -3em 0 0 red,
  13.     -2em -2em 0 0 red,
  14.     2em -2em 0 0 red,
  15.     -3em -1em 0 0 red,
  16.     -2em -1em 0 0 red,
  17.     2em -1em 0 0 red,
  18.     3em -1em 0 0 red,
  19.     -4em 0 0 0 red,
  20.     -3em 0 0 0 red,
  21.     3em 0 0 0 red,
  22.     4em 0 0 0 red,
  23.     -5em 1em 0 0 red,
  24.     -4em 1em 0 0 red,
  25.     4em 1em 0 0 red,
  26.     5em 1em 0 0 red,
  27.     -5em 2em 0 0 red,
  28.     5em 2em 0 0 red,
  29.     -5em 3em 0 0 red,
  30.     -3em 3em 0 0 red,
  31.     3em 3em 0 0 red,
  32.     5em 3em 0 0 red,
  33.     -2em 4em 0 0 red,
  34.     -1em 4em 0 0 red,
  35.     1em 4em 0 0 red,
  36.     2em 4em 0 0 red;
  37.     background: red;
  38.     width: 1em;
  39.     height: 1em;
  40.     overflow: hidden;
  41.     margin: 100px;
  42.   }

 

 30、Facebook Icon（Facebook图标）

  1. <!-- html -->
  2. <div id="facebook-icon"></div>
  3.  
  4. <!-- css -->
  5. #facebook-icon {
  6.   background: red;
  7.   text-indent: -999em;
  8.   width: 100px;
  9.   height: 110px;
  10.   border-radius: 5px;
  11.   position: relative;
  12.   overflow: hidden;
  13.   border: 15px solid red;
  14.   border-bottom: 0;
  15. }
  16. #facebook-icon::before {
  17.   content: "/20";
  18.   position: absolute;
  19.   background: red;
  20.   width: 40px;
  21.   height: 90px;
  22.   bottom: -30px;
  23.   right: -37px;
  24.   border: 20px solid #eee;
  25.   border-radius: 25px;
  26. }
  27. #facebook-icon::after {
  28.   content: "/20";
  29.   position: absolute;
  30.   width: 55px;
  31.   top: 50px;
  32.   height: 20px;
  33.   background: #eee;
  34.   right: 5px;
  35. }

 

 31、Moon(月亮)

  1. <!-- html -->
  2. <div id="moon"></div>
  3.  
  4. <!-- css -->
  5. #moon {
  6.   width: 80px;
  7.   height: 80px;
  8.   border-radius: 50%;
  9.   box-shadow: 15px 15px 0 0 red;
  10. }

 

 32、Cross（十字架）

  1. <!-- html -->
  2. <div id="cross"></div>
  3.  
  4. <!-- css -->
  5. #cross {
  6.   background: red;
  7.   height: 100px;
  8.   position: relative;
  9.   width: 20px;
  10.   margin: 100px;
  11. }
  12. #cross:after {
  13.   background: red;
  14.   content: "";
  15.   height: 20px;
  16.   left: -40px;
  17.   position: absolute;
  18.   top: 40px;
  19.   width: 100px;
  20. }

 

 33、Curved Tail Arrow(弯尾箭头)

  1. <!-- html -->
  2. <div id="curvedarrow"></div>
  3.  
  4. <!-- css -->
  5. #curvedarrow {
  6.   margin: 100px;
  7.   position: relative;
  8.   width: 0;
  9.   height: 0;
  10.   border-top: 9px solid transparent;
  11.   border-right: 9px solid red;
  12.   -webkit-transform: rotate(10deg);
  13.   -moz-transform: rotate(10deg);
  14.   -ms-transform: rotate(10deg);
  15.   -o-transform: rotate(10deg);
  16. }
  17. #curvedarrow:after {
  18.   content: "";
  19.   position: absolute;
  20.   border: 0 solid transparent;
  21.   border-top: 3px solid red;
  22.   border-radius: 20px 0 0 0;
  23.   top: -12px;
  24.   left: -9px;
  25.   width: 12px;
  26.   height: 12px;
  27.   -webkit-transform: rotate(45deg);
  28.   -moz-transform: rotate(45deg);
  29.   -ms-transform: rotate(45deg);
  30.   -o-transform: rotate(45deg);
  31. }

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/97006
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号