今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形，里面有最简单的矩形、圆形和三角形，也有各种常见的多边形，甚至是阴阳太极和网站小图标，真的非常强大，分享给大家。

Square(正方形)

  1. #square {
  2.     width: 100px;
  3.     height: 100px;
  4.     background: red;
  5. }

Rectangle(矩形)

  1. #rectangle {
  2.     width: 200px;
  3.     height: 100px;
  4.     background: red;
  5. }

Circle(圆形)

  1. #circle {
  2.     width: 100px;
  3.     height: 100px;
  4.     background: red;
  5.     -moz-border-radius: 50px;
  6.     -webkit-border-radius: 50px;
  7.     border-radius: 50px;
  8. }
  9.  
  10. /* 可以使用百分比值(大于50%)，但是低版本的Android不支持 */

Oval(椭圆形)

  1. #oval {
  2.     width: 200px;
  3.     height: 100px;
  4.     background: red;
  5.     -moz-border-radius: 100px / 50px;
  6.     -webkit-border-radius: 100px / 50px;
  7.     border-radius: 100px / 50px;
  8. }
  9.  
  10. /* 可以使用百分比值(大于50%)，但是低版本的Android不支持 */

Triangle Up(向上的三角形)

  1. #triangle-up {
  2.     width: ;
  3.     height: ;
  4.     border-left: 50px solid transparent;
  5.     border-right: 50px solid transparent;
  6.     border-bottom: 100px solid red;
  7. }

Triangle Down(向下)

  1. #triangle-down {
  2.     width: ;
  3.     height: ;
  4.     border-left: 50px solid transparent;
  5.     border-right: 50px solid transparent;
  6.     border-top: 100px solid red;
  7. }

Triangle Left(向左)

  1. #triangle-left {
  2.     width: ;
  3.     height: ;
  4.     border-top: 50px solid transparent;
  5.     border-right: 100px solid red;
  6.     border-bottom: 50px solid transparent;
  7. }

Triangle Right(向右)

  1. #triangle-right {
  2.     width: ;
  3.     height: ;
  4.     border-top: 50px solid transparent;
  5.     border-left: 100px solid red;
  6.     border-bottom: 50px solid transparent;
  7. }

Triangle Top Left(左上)

  1. #triangle-topleft {
  2.     width: ;
  3.     height: ;
  4.     border-top: 100px solid red;
  5.     border-right: 100px solid transparent;
  6. }

Triangle Top Right(右上)

  1. #triangle-topright {
  2.     width: ;
  3.     height: ;
  4.     border-top: 100px solid red;
  5.     border-left: 100px solid transparent;
  6. }

Triangle Bottom Left(左下)

  1. #triangle-bottomleft {
  2.     width: ;
  3.     height: ;
  4.     border-bottom: 100px solid red;
  5.     border-right: 100px solid transparent;
  6. }

Triangle Bottom Right(右下)

  1. #triangle-bottomright {
  2.     width: ;
  3.     height: ;
  4.     border-bottom: 100px solid red;
  5.     border-left: 100px solid transparent;
  6. }

Curved Tail Arrow(弯尾箭头)

  1. #curvedarrow {
  2.   position: relative;
  3.   width: ;
  4.   height: ;
  5.   border-top: 9px solid transparent;
  6.   border-right: 9px solid red;
  7.   -webkit-transform: rotate(10deg);
  8.   -moz-transform: rotate(10deg);
  9.   -ms-transform: rotate(10deg);
  10.   -o-transform: rotate(10deg);
  11. }
  12. #curvedarrow:after {
  13.   content: "";
  14.   position: absolute;
  15.   border:  solid transparent;
  16.   border-top: 3px solid red;
  17.   border-radius: 20px   ;
  18.   top: -12px;
  19.   left: -9px;
  20.   width: 12px;
  21.   height: 12px;
  22.   -webkit-transform: rotate(45deg);
  23.   -moz-transform: rotate(45deg);
  24.   -ms-transform: rotate(45deg);
  25.   -o-transform: rotate(45deg);
  26. }

Trapezoid(梯形)

  1. #curvedarrow {
  2.   position: relative;
  3.   width: ;
  4.   height: ;
  5.   border-top: 9px solid transparent;
  6.   border-right: 9px solid red;
  7.   -webkit-transform: rotate(10deg);
  8.   -moz-transform: rotate(10deg);
  9.   -ms-transform: rotate(10deg);
  10.   -o-transform: rotate(10deg);
  11. }
  12. #curvedarrow:after {
  13.   content: "";
  14.   position: absolute;
  15.   border:  solid transparent;
  16.   border-top: 3px solid red;
  17.   border-radius: 20px   ;
  18.   top: -12px;
  19.   left: -9px;
  20.   width: 12px;
  21.   height: 12px;
  22.   -webkit-transform: rotate(45deg);
  23.   -moz-transform: rotate(45deg);
  24.   -ms-transform: rotate(45deg);
  25.   -o-transform: rotate(45deg);
  26. }

Parallelogram(平行四边形)

  1. #parallelogram {
  2.     width: 150px;
  3.     height: 100px;
  4.     -webkit-transform: skew(20deg);
  5.        -moz-transform: skew(20deg);
  6.          -o-transform: skew(20deg);
  7.     background: red;
  8. }

Star (6-points)(六角星)

  1. #star-six {
  2.     width: ;
  3.     height: ;
  4.     border-left: 50px solid transparent;
  5.     border-right: 50px solid transparent;
  6.     border-bottom: 100px solid red;
  7.     position: relative;
  8. }
  9. #star-six:after {
  10.     width: ;
  11.     height: ;
  12.     border-left: 50px solid transparent;
  13.     border-right: 50px solid transparent;
  14.     border-top: 100px solid red;
  15.     position: absolute;
  16.     content: "";
  17.     top: 30px;
  18.     left: -50px;
  19. }

Star (5-points)(五角星)

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

Pentagon(五边形)

  1. #pentagon {
  2.     position: relative;
  3.     width: 54px;
  4.     border-width: 50px 18px ;
  5.     border-style: solid;
  6.     border-color: red transparent;
  7. }
  8. #pentagon:before {
  9.     content: "";
  10.     position: absolute;
  11.     height: ;
  12.     width: ;
  13.     top: -85px;
  14.     left: -18px;
  15.     border-width:  45px 35px;
  16.     border-style: solid;
  17.     border-color: transparent transparent red;
  18. }

Hexagon(六边形)

  1. #hexagon {
  2.     width: 100px;
  3.     height: 55px;
  4.     background: red;
  5.     position: relative;
  6. }
  7. #hexagon:before {
  8.     content: "";
  9.     position: absolute;
  10.     top: -25px;
  11.     left: ;
  12.     width: ;
  13.     height: ;
  14.     border-left: 50px solid transparent;
  15.     border-right: 50px solid transparent;
  16.     border-bottom: 25px solid red;
  17. }
  18. #hexagon:after {
  19.     content: "";
  20.     position: absolute;
  21.     bottom: -25px;
  22.     left: ;
  23.     width: ;
  24.     height: ;
  25.     border-left: 50px solid transparent;
  26.     border-right: 50px solid transparent;
  27.     border-top: 25px solid red;
  28. }

Octagon(八边形)

  1. #octagon {
  2.     width: 100px;
  3.     height: 100px;
  4.     background: red;
  5.     position: relative;
  6. }
  7.  
  8. #octagon:before {
  9.     content: "";
  10.     position: absolute;
  11.     top: ;
  12.     left: ;
  13.     border-bottom: 29px solid red;
  14.     border-left: 29px solid #fff;
  15.     border-right: 29px solid #fff;
  16.     width: 42px;
  17.     height: ;
  18. }
  19.  
  20. #octagon:after {
  21.     content: "";
  22.     position: absolute;
  23.     bottom: ;
  24.     left: ;
  25.     border-top: 29px solid red;
  26.     border-left: 29px solid #fff;
  27.     border-right: 29px solid #fff;
  28.     width: 42px;
  29.     height: ;
  30. }

Heart(心形)

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

Infinity(无限符图形)

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

Diamond Square(菱形)

  1. #diamond {
  2.     width: ;
  3.     height: ;
  4.     border: 50px solid transparent;
  5.     border-bottom-color: red;
  6.     position: relative;
  7.     top: -50px;
  8. }
  9. #diamond:after {
  10.     content: '';
  11.     position: absolute;
  12.     left: -50px;
  13.     top: 50px;
  14.     width: ;
  15.     height: ;
  16.     border: 50px solid transparent;
  17.     border-top-color: red;
  18. }

Diamond Shield（钻石盾牌）

  1. #diamond-shield {
  2.     width: ;
  3.     height: ;
  4.     border: 50px solid transparent;
  5.     border-bottom: 20px solid red;
  6.     position: relative;
  7.     top: -50px;
  8. }
  9. #diamond-shield:after {
  10.     content: '';
  11.     position: absolute;
  12.     left: -50px; top: 20px;
  13.     width: ;
  14.     height: ;
  15.     border: 50px solid transparent;
  16.     border-top: 70px solid red;
  17. }

Diamond Narrow

  1. #diamond-narrow {
  2.     width: ;
  3.     height: ;
  4.     border: 50px solid transparent;
  5.     border-bottom: 70px solid red;
  6.     position: relative;
  7.     top: -50px;
  8. }
  9. #diamond-narrow:after {
  10.     content: '';
  11.     position: absolute;
  12.     left: -50px; top: 70px;
  13.     width: ;
  14.     height: ;
  15.     border: 50px solid transparent;
  16.     border-top: 70px solid red;
  17. }

Cut Diamond(砖石形)

  1. #cut-diamond {
  2.     border-style: solid;
  3.     border-color: transparent transparent red transparent;
  4.     border-width:  25px 25px 25px;
  5.     height: ;
  6.     width: 50px;
  7.     position: relative;
  8.     margin: 20px  50px ;
  9. }
  10. #cut-diamond:after {
  11.     content: "";
  12.     position: absolute;
  13.     top: 25px;
  14.     left: -25px;
  15.     width: ;
  16.     height: ;
  17.     border-style: solid;
  18.     border-color: red transparent transparent transparent;
  19.     border-width: 70px 50px  50px;
  20. }

Egg(鸡蛋)

  1. #egg {
  2.    display:block;
  3.    width: 126px;
  4.    height: 180px;
  5.    background-color: red;
  6.    -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
  7.    border-radius:         %  %  %  %  / %   %   %  %;
  8. }

Pac-Man(吃豆人)

  1. #pacman {
  2.   width: 0px;
  3.   height: 0px;
  4.   border-right: 60px solid transparent;
  5.   border-top: 60px solid red;
  6.   border-left: 60px solid red;
  7.   border-bottom: 60px solid red;
  8.   border-top-left-radius: 60px;
  9.   border-top-right-radius: 60px;
  10.   border-bottom-left-radius: 60px;
  11.   border-bottom-right-radius: 60px;
  12. }

Talk Bubble（聊天框）

  1. #talkbubble {
  2.    width: 120px;
  3.    height: 80px;
  4.    background: red;
  5.    position: relative;
  6.    -moz-border-radius:    10px;
  7.    -webkit-border-radius: 10px;
  8.    border-radius:         10px;
  9. }
  10. #talkbubble:before {
  11.    content:"";
  12.    position: absolute;
  13.    right: %;
  14.    top: 26px;
  15.    width: ;
  16.    height: ;
  17.    border-top: 13px solid transparent;
  18.    border-right: 26px solid red;
  19.    border-bottom: 13px solid transparent;
  20. }

12 Point Burst（爆炸形状）

  1. #burst- {
  2.     background: red;
  3.     width: 80px;
  4.     height: 80px;
  5.     position: relative;
  6.     text-align: center;
  7. }
  8. #burst-:before, #burst-:after {
  9.     content: "";
  10.     position: absolute;
  11.     top: ;
  12.     left: ;
  13.     height: 80px;
  14.     width: 80px;
  15.     background: red;
  16. }
  17. #burst-:before {
  18.     -webkit-transform: rotate(30deg);
  19.        -moz-transform: rotate(30deg);
  20.         -ms-transform: rotate(30deg);
  21.          -o-transform: rotate(30deg);
  22. }
  23. #burst-:after {
  24.     -webkit-transform: rotate(60deg);
  25.        -moz-transform: rotate(60deg);
  26.         -ms-transform: rotate(60deg);
  27.          -o-transform: rotate(60deg);
  28. }

Yin Yang(阴阳八卦)

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

Badge Ribbon(徽章丝带)

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

Space Invader（太空入侵者）

  1. #space-invader{
  2.   box-shadow:
  3.        1em red,
  4.      1em  1em red,
  5.     -.5em .5em  .5em red,
  6.     .5em .5em  .5em red,
  7.     -3em -3em   red,
  8.     3em -3em   red,
  9.     -2em -2em   red,
  10.     2em -2em   red,
  11.     -3em -1em   red,
  12.     -2em -1em   red,
  13.     2em -1em   red,
  14.     3em -1em   red,
  15.     -4em    red,
  16.     -3em    red,
  17.     3em    red,
  18.     4em    red,
  19.     -5em 1em   red,
  20.     -4em 1em   red,
  21.     4em 1em   red,
  22.     5em 1em   red,
  23.     -5em 2em   red,
  24.     5em 2em   red,
  25.     -5em 3em   red,
  26.     -3em 3em   red,
  27.     3em 3em   red,
  28.     5em 3em   red,
  29.     -2em 4em   red,
  30.     -1em 4em   red,
  31.     1em 4em   red,
  32.     2em 4em   red;
  33.  
  34.     background: red;
  35.     width: 1em;
  36.     height: 1em;
  37.     overflow: hidden;
  38.  
  39.     margin: 50px  70px 65px;
  40.   }

TV Screen（电视屏幕）

  1. #tv {
  2.   position: relative;
  3.   width: 200px;
  4.   height: 150px;
  5.   margin: 20px ;
  6.   background: red;
  7.   border-radius: % / %;
  8.   color: white;
  9.   text-align: center;
  10.   text-indent: .1em;
  11. }
  12. #tv:before {
  13.   content: '';
  14.   position: absolute;
  15.   top: %;
  16.   bottom: %;
  17.   right: -%;
  18.   left: -%;
  19.   background: inherit;
  20.   border-radius: % / %;
  21. }

Chevron（雪佛龙）

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

Magnifying Glass（放大镜）

  1. #magnifying-glass{
  2.  font-size: 10em; /* This controls the size. */
  3.  display: inline-block;
  4.  width: .4em;
  5.  height: .4em;
  6.  border: .1em solid red;
  7.  position: relative;
  8.  border-radius: .35em;
  9. }
  10. #magnifying-glass::before{
  11.  content: "";
  12.  display: inline-block;
  13.  position: absolute;
  14.  right: -.25em;
  15.  bottom: -.1em;
  16.  border-width: ;
  17.  background: red;
  18.  width: .35em;
  19.  height: .08em;
  20.  -webkit-transform: rotate(45deg);
  21.     -moz-transform: rotate(45deg);
  22.      -ms-transform: rotate(45deg);
  23.       -o-transform: rotate(45deg);
  24. }

Facebook Icon（Facebook图标）

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

Cone(圆锥形)

  1. #cone {
  2.   width: ;
  3.   height: ;
  4.   border-left: 70px solid transparent;
  5.   border-right: 70px solid transparent;
  6.   border-top: 100px solid red;
  7.   -moz-border-radius: %;
  8.   -webkit-border-radius: %;
  9.   border-radius: %;
  10. }

Moon(月亮)

  1. #moon {
  2.   width: 80px;
  3.   height: 80px;
  4.   border-radius: %;
  5.   box-shadow: 15px 15px   red;
  6. }

Cross（十字架）

  1. #cross {
  2.   background: red;
  3.   height: 100px;
  4.   position: relative;
  5.   width: 20px;
  6. }
  7. #cross:after {
  8.   background: red;
  9.   content: "";
  10.   height: 20px;
  11.   left: -40px;
  12.   position: absolute;
  13.   top: 40px;
  14.   width: 100px;
  15. }

以上就是纯CSS绘制的各种图形，感受到CSS的强大了吧。

本文链接：http://www.codeceo.com/article/40-css-shapes.html
本文作者：码农网 – 陈少华
[ 原创作品，转载必须在正文中标注并保留原文链接和作者等信息。]

史上最强大的40多个纯CSS绘制的图形[转]的更多相关文章

  1. 摘记 史上最强大的40多个纯CSS绘制的图形（一）

    今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和网站小图标,真的非常强大,分享给大家. Square(正方 ...

  2. 史上最强大的40多个纯CSS绘制的图形

    Square(正方形) #square { width: 100px; height: 100px; background: red; } Rectangle(矩形) #rectangle { wid ...

  3. 40多个纯CSS绘制的图形

    本文由码农网 – 陈少华原创,转载请看清文末的转载要求. 今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和 ...

  4. CSS 魔法系列：纯 CSS 绘制各种图形《系列五》

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

  5. 纯CSS绘制的图形一览

    整理网上一些使用纯CSS绘制的图形示例~~纯属抄袭,哈哈...仅仅是为了自己以后查看! Square(正方形) #square { width: 100px; height: 100px; backg ...

  6. CSS 魔法系列：纯 CSS 绘制各种图形《系列六》

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

  7. CSS 魔法系列：纯 CSS 绘制基本图形（圆、椭圆等）

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

  8. 强烈推荐：Android史上最强大的自定义任务软件Tasker

    强烈推荐:Android史上最强大的自定义任务软件Taskerhttp://bbs.mumayi.com/thread-28387-1-1.html(出处: 木蚂蚁手机乐园) Android上的Tas ...

  9. 碉堡了！ 纯 CSS 绘制《辛普森一家》人物头像

    这篇文章给大家分享一组纯 CSS 绘制的<辛普森一家>人物头像.<辛普森一家>(The Simpsons)是马特·格勒宁为美国福克斯广播公司创作的一部动画情景喜剧.该剧通过对霍 ...

随机推荐

  1. Linux系统下 Supervisor 安装搭建

    在 web 应用部署到线上后,需要保证应用一直处于运行状态,在遇到程序异常.报错等情况,导致 web 应用终止时,需要保证程序可以立刻重启,继续提供服务. 所以,就需要一个工具,时刻监控 web 应用 ...

  2. 170508、忘记jenkins密码或者修改jenkins密码

    刚配置好jenkins时,不知道密码是什么,很多同学都有这种烦恼把,各种抓狂. 操作步骤: 1.进入jenkins用户目录  cd /home/rick/.jenkins/users/admin ps ...

  3. ubuntu 安装搜狗

    先按照这个选择fcitx: https://blog.csdn.net/qq_40563761/article/details/82664851 然后重启 右上角会出现键盘图片点击选configura ...

  4. SQL Server分区键列必须是主键一部分

    SQL Server分区键列必须是主键一部分. 必须把分区列包含在主键/唯一约束/唯一索引的键列中. USE tempdb GO -- 测试表 CREATE TABLE dbo.tb( id int, ...

  5. C++循环的内存释放问题？

    针对http://wenku.baidu.com/view/56d732ee856a561252d36ff2.html的内容测试一下. #include "A.h" #includ ...

  6. git相关使用技巧和问题

    本地有修改和提交,如何强制用远程的库更新更新.我尝试过用git pull -f,总是提示 You have not concluded your merge. (MERGE_HEAD exists). ...

  7. 前端基础（html）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 已有模板与tp框架的结合 （前台）

    已有模板与tp框架的结合 具体步骤   A．复制模板文件到view指定目录 B． 复合css .js.img.静态资源文件到系统指定目录 C． 把静态资源(css,js,img)文件的路径设置为“常量 ...

  9. CCPC 2016-2017, Finals Solution

    A - The Third Cup is Free 水. #include<bits/stdc++.h> using namespace std; ; int n; int arr[max ...

  10. hdu 5068 线段树加+dp

    这题说的是 有n 层每层 有两个门 每个门 可以到达上一层的两个门,然后求从a 层到达b 层的方案总数, 不能后退, 在同一层中不能从第一个门到达另一层 我们只要我们可以对于每个 区间内 有dp[o] ...