程序博客网 > 五矿证券怎么样 知乎

[DIV/CSS] 纯CSS制作各种图形(多图预警)

来源：互联网 发布：五矿证券怎么样 知乎 编辑：程序博客网 时间：2024/04/30 17:10

今天在国外一网站(The Shapes of CSS)看到的，看了一下 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. }
  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. }
  10. /* 可以使用百分比值(大于50%)，但是低版本的Android不支持 */
  11. http://www.nvzi91.cn/byjc/29923.html
复制代码
Triangle Up(向上的三角形)

  1. #triangle-up {
  2. width: 0;
  3. height: 0;
  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: 0;
  3. height: 0;
  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: 0;
  3. height: 0;
  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: 0;
  3. height: 0;
  4. border-top: 50px solid transparent;
  5. border-left: 100px solid red;
  6. border-bottom: 50px solid transparent;
  7. }http://www.nvzi91.cn/baidaiyichang/29924.html
复制代码
Triangle Top Left(左上)

  1. #triangle-topleft {
  2. width: 0;
  3. height: 0;
  4. border-top: 100px solid red;
  5. border-right: 100px solid transparent;
  6. }
复制代码
Triangle Top Right(右上)

  1. #triangle-topright {
  2. width: 0;
  3. height: 0;
  4. border-top: 100px solid red;
  5. border-left: 100px solid transparent;
  6. }http://www.nvzi91.cn/rlyby/031129925.html
复制代码
Triangle Bottom Left(左下)

  1. #triangle-bottomleft {
  2. width: 0;
  3. height: 0;
  4. border-bottom: 100px solid red;
  5. border-right: 100px solid transparent;
  6. }
复制代码
Triangle Bottom Right(右下)

  1. #triangle-bottomright {
  2. width: 0;
  3. height: 0;
  4. border-bottom: 100px solid red;
  5. border-left: 100px solid transparent;
  6. }
复制代码
Curved Tail Arrow(弯尾箭头)

可以通过修改 #curvedarrow 的 rotate() 值来形成不同的方向

  1. #curvedarrow {
  2. position: relative;
  3. width: 0;
  4. height: 0;
  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: 0 solid transparent;
  16. border-top: 3px solid red;
  17. border-radius: 20px 0 0 0;
  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. }http://www.nvzi91.cn/qinggan/29926.html
复制代码
Trapezoid(梯形)

  1. #trapezoid {
  2. border-bottom: 100px solid red;
  3. border-left: 50px solid transparent;
  4. border-right: 50px solid transparent;
  5. height: 0;
  6. width: 100px;
  7. }
复制代码
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: 0;
  3. height: 0;
  4. border-left: 50px solid transparent;
  5. border-right: 50px solid transparent;
  6. border-bottom: 100px solid red;
  7. position: relative;
  8. }http://www.nvzi91.cn/gongwaiyun/29927.html
  9. #star-six:after {
  10. width: 0;
  11. height: 0;
  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 0;
  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. }http://www.kmrlyy.com/yindaoyan/dcxydy/33437.html
  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: 0;
  22. width: 0;
  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);
  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 0;
  5. border-style: solid;
  6. border-color: red transparent;
  7. }http://www.kmrlyy.com/zgnma/33438.html
  8. #pentagon:before {
  9. content: "";
  10. position: absolute;
  11. height: 0;
  12. width: 0;
  13. top: -85px;
  14. left: -18px;
  15. border-width: 0 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: 0;
  12. width: 0;
  13. height: 0;
  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: 0;
  23. width: 0;
  24. height: 0;
  25. border-left: 50px solid transparent;
  26. border-right: 50px solid transparent;
  27. border-top: 25px solid red;
  28. }http://www.kmrlyy.com/fkjbcs/33439.html
复制代码
Octagon(八边形)

  1. <br>#octagon {
  2. width: 100px;
  3. height: 100px;
  4. background: red;
  5. position: relative;
  6. }
  8. #octagon:before {
  9. content: "";
  10. position: absolute;
  11. top: 0;
  12. left: 0;
  13. border-bottom: 29px solid red;
  14. border-left: 29px solid #fff;
  15. border-right: 29px solid #fff;
  16. width: 42px;
  17. height: 0;
  18. }
  20. #octagon:after {
  21. content: "";
  22. position: absolute;
  23. bottom: 0;
  24. left: 0;
  25. border-top: 29px solid red;
  26. border-left: 29px solid #fff;
  27. border-right: 29px solid #fff;
  28. width: 42px;
  29. height: 0;
  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: 0;
  12. width: 50px;
  13. height: 80px;
  14. background: red;
  15. -moz-border-radius: 50px 50px 0 0;
  16. border-radius: 50px 50px 0 0;
  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: 0 100%;
  23. -moz-transform-origin: 0 100%;
  24. -ms-transform-origin: 0 100%;
  25. -o-transform-origin: 0 100%;
  26. transform-origin: 0 100%;
  27. }http://www.kmrlyy.com/fujianyan/33440.html
  28. #heart:after {
  29. left: 0;
  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: 100% 100%;
  36. -moz-transform-origin: 100% 100%;
  37. -ms-transform-origin: 100% 100%;
  38. -o-transform-origin: 100% 100%;
  39. transform-origin :100% 100%;
  40. }
复制代码
Infinity(无限符图形)

  1. #infinity {
  2. position: relative;
  3. width: 212px;
  4. height: 100px;
  5. }
  7. #infinity:before,
  8. #infinity:after {
  9. content: "";
  10. position: absolute;
  11. top: 0;
  12. left: 0;
  13. width: 60px;
  14. height: 60px;
  15. border: 20px solid red;
  16. -moz-border-radius: 50px 50px 0 50px;
  17. border-radius: 50px 50px 0 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. }
  25. #infinity:after {
  26. left: auto;
  27. right: 0;
  28. -moz-border-radius: 50px 50px 50px 0;
  29. border-radius: 50px 50px 50px 0;
  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. }http://www.kmrlyy.com/gongjingmilan/33441.html
复制代码
Diamond Square(菱形)

  1. #diamond {
  2. width: 0;
  3. height: 0;
  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: 0;
  15. height: 0;
  16. border: 50px solid transparent;
  17. border-top-color: red;
  18. }
复制代码
Diamond Shield

  1. #diamond-shield {
  2. width: 0;
  3. height: 0;
  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: 0;
  14. height: 0;
  15. border: 50px solid transparent;
  16. border-top: 70px solid red;
  17. }
复制代码
Diamond Narrow

  1. #diamond-narrow {
  2. width: 0;
  3. height: 0;
  4. border: 50px solid transparent;
  5. border-bottom: 70px solid red;
  6. position: relative;
  7. top: -50px;
  8. }http://m.nvzi91.cn/wutongrenliu/29342.html
  9. #diamond-narrow:after {
  10. content: '';
  11. position: absolute;
  12. left: -50px; top: 70px;
  13. width: 0;
  14. height: 0;
  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: 0 25px 25px 25px;
  5. height: 0;
  6. width: 50px;
  7. position: relative;
  8. margin: 20px 0 50px 0;
  9. }
  10. #cut-diamond:after {
  11. content: "";
  12. position: absolute;
  13. top: 25px;
  14. left: -25px;
  15. width: 0;
  16. height: 0;
  17. border-style: solid;
  18. border-color: red transparent transparent transparent;
  19. border-width: 70px 50px 0 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: 50% 50% 50% 50% / 60% 60% 40% 40%;
  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. }http://m.nvzi91.cn/gongjingai/29343.html
  10. #talkbubble:before {
  11. content:"";
  12. position: absolute;
  13. right: 100%;
  14. top: 26px;
  15. width: 0;
  16. height: 0;
  17. border-top: 13px solid transparent;
  18. border-right: 26px solid red;
  19. border-bottom: 13px solid transparent;
  20. }
复制代码
12 Point Burst

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

  1. #burst-8 {
  2. background: red;
  3. width: 80px;
  4. height: 80px;
  5. position: relative;
  6. text-align: center;
  7. -webkit-transform: rotate(20deg);
  8. -moz-transform: rotate(20deg);
  9. -ms-transform: rotate(20deg);
  10. -o-transform: rotate(20eg);
  11. }
  12. #burst-8:before {
  13. content: "";
  14. position: absolute;
  15. top: 0;
  16. left: 0;
  17. height: 80px;
  18. width: 80px;
  19. background: red;
  20. -webkit-transform: rotate(135deg);
  21. -moz-transform: rotate(135deg);
  22. -ms-transform: rotate(135deg);
  23. -o-transform: rotate(135deg);
  24. }
复制代码
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: 100%;
  9. position: relative;
  10. }
  12. #yin-yang:before {
  13. content: "";
  14. position: absolute;
  15. top: 50%;
  16. left: 0;
  17. background: #eee;
  18. border: 18px solid red;
  19. border-radius: 100%;
  20. width: 12px;
  21. height: 12px;
  22. }
  24. #yin-yang:after {
  25. content: "";
  26. position: absolute;
  27. top: 50%;
  28. left: 50%;
  29. background: red;
  30. border: 18px solid #eee;
  31. border-radius:100%;
  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. }http://m.nvzi91.cn/liangxingjiankang/201603/11-29344.html
  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. }
  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. 0 0 0 1em red,
  4. 0 1em 0 1em red,
  5. -2.5em 1.5em 0 .5em red,
  6. 2.5em 1.5em 0 .5em red,
  7. -3em -3em 0 0 red,
  8. 3em -3em 0 0 red,
  9. -2em -2em 0 0 red,
  10. 2em -2em 0 0 red,
  11. -3em -1em 0 0 red,
  12. -2em -1em 0 0 red,
  13. 2em -1em 0 0 red,
  14. 3em -1em 0 0 red,
  15. -4em 0 0 0 red,
  16. -3em 0 0 0 red,
  17. 3em 0 0 0 red,
  18. 4em 0 0 0 red,
  19. -5em 1em 0 0 red,
  20. -4em 1em 0 0 red,
  21. 4em 1em 0 0 red,
  22. 5em 1em 0 0 red,
  23. -5em 2em 0 0 red,
  24. 5em 2em 0 0 red,
  25. -5em 3em 0 0 red,
  26. -3em 3em 0 0 red,
  27. 3em 3em 0 0 red,
  28. 5em 3em 0 0 red,
  29. -2em 4em 0 0 red,
  30. -1em 4em 0 0 red,
  31. 1em 4em 0 0 red,
  32. 2em 4em 0 0 red;
  34. background: red;
  35. width: 1em;
  36. height: 1em;
  37. overflow: hidden;
  39. margin: 50px 0 70px 65px;
  40. }
复制代码
TV Screen

  1. #tv {www.nvzi91.cn
  2. position: relative;
  3. width: 200px;
  4. height: 150px;
  5. margin: 20px 0;
  6. background: red;
  7. border-radius: 50% / 10%;
  8. color: white;
  9. text-align: center;
  10. text-indent: .1em;
  11. }
  12. #tv:before {
  13. content: '';
  14. position: absolute;
  15. top: 10%;
  16. bottom: 10%;
  17. right: -5%;
  18. left: -5%;
  19. background: inherit;
  20. border-radius: 5% / 50%;
  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. }
  10. #chevron:before {
  11. content: '';
  12. position: absolute;
  13. top: 0;
  14. left: 0;
  15. height: 100%;
  16. width: 51%;
  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: 0;
  28. right: 0;
  29. height: 100%;
  30. width: 50%;
  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: 0.4em;
  5. height: 0.4em;
  6. border: 0.1em solid red;
  7. position: relative;
  8. border-radius: 0.35em;
  9. }
  10. #magnifying-glass::before{
  11. content: "";
  12. display: inline-block;
  13. position: absolute;
  14. right: -0.25em;
  15. bottom: -0.1em;
  16. border-width: 0;
  17. background: red;
  18. width: 0.35em;
  19. height: 0.08em;www.kmrlyy.com
  20. -webkit-transform: rotate(45deg);
  21. -moz-transform: rotate(45deg);
  22. -ms-transform: rotate(45deg);
  23. -o-transform: rotate(45deg);
  24. }
复制代码
Facebook Icon

  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: 0;
  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: 0;
  3. height: 0;
  4. border-left: 70px solid transparent;
  5. border-right: 70px solid transparent;
  6. border-top: 100px solid red;
  7. -moz-border-radius: 50%;
  8. -webkit-border-radius: 50%;
  9. border-radius: 50%;
  10. }m.nvzi91.cn
复制代码
Moon(月亮)

  1. #moon {
  2. width: 80px;
  3. height: 80px;
  4. border-radius: 50%;
  5. box-shadow: 15px 15px 0 0 red;
  6. }
复制代码
Flag

  1. #flag {
  2. width: 110px;
  3. height: 56px;
  4. padding-top: 15px;
  5. position: relative;
  6. background: red;
  7. color: white;
  8. font-size: 11px;
  9. letter-spacing: 0.2em;
  10. text-align: center;
  11. text-transform: uppercase;
  12. }
  13. #flag:after {
  14. content: "";
  15. position: absolute;
  16. left: 0;
  17. bottom: 0;
  18. width: 0;
  19. height: 0;
  20. border-bottom: 13px solid #fff;
  21. border-left: 55px solid transparent;
  22. border-right: 55px solid transparent;
  23. }
复制代码
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. }
复制代码
Base

  1. #base {
  2. background: red;
  3. display: inline-block;
  4. height: 55px;
  5. margin-left: 20px;
  6. margin-top: 55px;
  7. position: relative;
  8. width: 100px;
  9. }
  10. #base:before {
  11. border-bottom: 35px solid red;
  12. border-left: 50px solid transparent;
  13. border-right: 50px solid transparent;
  14. content: "";
  15. height: 0;
  16. left: 0;
  17. position: absolute;
  18. top: -35px;
  19. width: 0;
  20. }
0 0
五矿证券怎么样 知乎 五矿证券怎么样 知乎
原创粉丝点击
热门IT博客
中文电子数据库有哪些中文电子数据库有哪些
网络编程思考题网络编程思考题
mac键位
吹牛 知乎
windows 98 se iso
贵金属软件哪个正规
centos查看网卡状态
6324倒闭知乎
nginx反向代理配置tcp
支持网络打印
java天数转换成年月日
天天有喜知画受伤
sql server 递归汇总
淘宝业务流程图
淘宝无线店铺怎么装修
es6 对象转换数组
java getlength
如何优化剑灵
现在在淘宝开店晚吗
bo神龙网络加速器
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 擦窗机 窗机空调不制冷怎么办 电动擦窗机 简易窗机空调 空调窗机怎么样 全自动贴窗机 家用自动擦窗机 电动开窗机 遥控门 开立方根 开立方 老公左右开弓扇嘴巴子 乡村开子 电压力锅盖子打不开 开童鞋店利润如何 开童鞋店的经验 开童装店必备常识 2018实体童装店还能开下去吗 开童装店注意事项 开童装店在哪进货好 开童装店需要注意什么 自己开个童装店 怎么样开童装店 如何开个童装店 开一个童装店的流程 开一家童装店的流程 怎么样开家童装店 开一家童装店要多少钱 开童装店的必备条件 如何开淘宝童装店 开童装店需要具备什么 开童装店好还是母婴店好 童装店利润怎么样 如何开好童装店 开童装店在哪进货 开童装店的流程 新手开童装店注意事项 开家童装店 镇上开童装店进货技巧 开童装店怎样进货 开店卖童装

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里