当前位置:   article > 正文

【纯CSS】这45个形状,一个标签就能实现_css形状模板

css形状模板

CSS能够生成各种形状。正方形和矩形很容易,因为它们是 web 的自然形状。

 

添加宽度和高度,就得到了所需的精确大小的矩形。

添加边框半径,你就可以把这个形状变成圆形,足够多的边框半径,你就可以把这些矩形变成圆形和椭圆形。

我们还可以使用 CSS 伪元素中的 ::before 和 ::after,这为我们提供了向原始元素添加另外两个形状的可能性。通过巧妙地使用定位、转换和许多其他技巧,我们可以只用一个 HTML 元素在 CSS 中创建许多形状。

虽然我们现在大都使用字体图标或者svg图片,似乎使用 CSS 来做图标意义不是很大,但怎么实现这些图标用到的一些技巧及思路是很值得我们的学习。

先看下CSS实现的形状:

 一个标签 + 下面的CSS代码,就能实现各种形状。

 1.正方形 

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

 2.长方形

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

 3.圆形

  1. #circle {
  2. width: 100px;
  3. height: 100px;
  4. background: red;
  5. border-radius: 50%
  6. }

 4.椭圆形

  1. #oval {
  2. width: 200px;
  3. height: 100px;
  4. background: red;
  5. border-radius: 100px / 50px;
  6. }

 5.上三角

  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. }

6.下三角

  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. }

 7.左三角

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

8.右三角

  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. }

 9.左上角

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

 10.右上角

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

 11.左下角

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

 12.右下角

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

 13.箭头

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

14.梯形

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

15.平行四边形

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

16.星星 (6角)

  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. }
  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. }

17.星星 (5角)

  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. transform: rotate(35deg);
  12. }
  13. #star-five:before {
  14. border-bottom: 80px solid red;
  15. border-left: 30px solid transparent;
  16. border-right: 30px solid transparent;
  17. position: absolute;
  18. height: 0;
  19. width: 0;
  20. top: -45px;
  21. left: -65px;
  22. display: block;
  23. content: '';
  24. transform: rotate(-35deg);
  25. }
  26. #star-five:after {
  27. position: absolute;
  28. display: block;
  29. color: red;
  30. top: 3px;
  31. left: -105px;
  32. width: 0px;
  33. height: 0px;
  34. border-right: 100px solid transparent;
  35. border-bottom: 70px solid red;
  36. border-left: 100px solid transparent;
  37. transform: rotate(-70deg);
  38. content: '';
  39. }

18.五边形

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

19.六边形

  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. }

20.八边形

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

21.爱心

  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. border-radius: 50px 50px 0 0;
  16. transform: rotate(-45deg);
  17. transform-origin: 0 100%;
  18. }
  19. #heart:after {
  20. left: 0;
  21. transform: rotate(45deg);
  22. transform-origin: 100% 100%;
  23. }

22.无穷大

  1. #infinity {
  2. position: relative;
  3. width: 212px;
  4. height: 100px;
  5. box-sizing: content-box;
  6. }
  7. #infinity:before,
  8. #infinity:after {
  9. content: "";
  10. box-sizing: content-box;
  11. position: absolute;
  12. top: 0;
  13. left: 0;
  14. width: 60px;
  15. height: 60px;
  16. border: 20px solid red;
  17. border-radius: 50px 50px 0 50px;
  18. transform: rotate(-45deg);
  19. }
  20. #infinity:after {
  21. left: auto;
  22. right: 0;
  23. border-radius: 50px 50px 50px 0;
  24. transform: rotate(45deg);
  25. }

23.菱形

  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. }

24.钻石

  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;
  13. top: 20px;
  14. width: 0;
  15. height: 0;
  16. border: 50px solid transparent;
  17. border-top: 70px solid red;
  18. }

25.钻戒

  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. }
  9. #diamond-narrow:after {
  10. content: '';
  11. position: absolute;
  12. left: -50px;
  13. top: 70px;
  14. width: 0;
  15. height: 0;
  16. border: 50px solid transparent;
  17. border-top: 70px solid red;
  18. }

26.钻石2

  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. box-sizing: content-box;
  8. position: relative;
  9. margin: 20px 0 50px 0;
  10. }
  11. #cut-diamond:after {
  12. content: "";
  13. position: absolute;
  14. top: 25px;
  15. left: -25px;
  16. width: 0;
  17. height: 0;
  18. border-style: solid;
  19. border-color: red transparent transparent transparent;
  20. border-width: 70px 50px 0 50px;
  21. }

27.蛋蛋

  1. #egg {
  2. display: block;
  3. width: 126px;
  4. height: 180px;
  5. background-color: red;
  6. border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  7. }

28.吃豆人

  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. }

29.对话泡泡

  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: 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. }

30. 12点 爆发

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

31. 8点 爆发

  1. #burst-8 {
  2. background: red;
  3. width: 80px;
  4. height: 80px;
  5. position: relative;
  6. text-align: center;
  7. transform: rotate(20deg);
  8. }
  9. #burst-8:before {
  10. content: "";
  11. position: absolute;
  12. top: 0;
  13. left: 0;
  14. height: 80px;
  15. width: 80px;
  16. background: red;
  17. transform: rotate(135deg);
  18. }

32.太极

  1. #yin-yang {
  2. width: 96px;
  3. box-sizing: content-box;
  4. height: 48px;
  5. background: #eee;
  6. border-color: red;
  7. border-style: solid;
  8. border-width: 2px 2px 50px 2px;
  9. border-radius: 100%;
  10. position: relative;
  11. }
  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. box-sizing: content-box;
  23. }
  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. box-sizing: content-box;
  35. }

33.徽章丝带

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

34.太空入侵者(电脑游戏名)

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

35.电视

  1. #tv {
  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. }

36.雪佛龙

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

37.放大镜

  1. #magnifying-glass {
  2. font-size: 10em;
  3. display: inline-block;
  4. width: 0.4em;
  5. box-sizing: content-box;
  6. height: 0.4em;
  7. border: 0.1em solid red;
  8. position: relative;
  9. border-radius: 0.35em;
  10. }
  11. #magnifying-glass:before {
  12. content: "";
  13. display: inline-block;
  14. position: absolute;
  15. right: -0.25em;
  16. bottom: -0.1em;
  17. border-width: 0;
  18. background: red;
  19. width: 0.35em;
  20. height: 0.08em;
  21. transform: rotate(45deg);
  22. }

38.Facebook图标

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

39.月亮

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

40.旗

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

41.圆锥

  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. border-radius: 50%;
  8. }

42.十字架

  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. }

43.根基

  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. }

44.指示器

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

45.锁

  1. #lock {
  2. font-size: 8px;
  3. position: relative;
  4. width: 18em;
  5. height: 13em;
  6. border-radius: 2em;
  7. top: 10em;
  8. box-sizing: border-box;
  9. border: 3.5em solid red;
  10. border-right-width: 7.5em;
  11. border-left-width: 7.5em;
  12. margin: 0 0 6rem 0;
  13. }
  14. #lock:before {
  15. content: "";
  16. box-sizing: border-box;
  17. position: absolute;
  18. border: 2.5em solid red;
  19. width: 14em;
  20. height: 12em;
  21. left: 50%;
  22. margin-left: -7em;
  23. top: -12em;
  24. border-top-left-radius: 7em;
  25. border-top-right-radius: 7em;
  26. }
  27. #lock:after {
  28. content: "";
  29. box-sizing: border-box;
  30. position: absolute;
  31. border: 1em solid red;
  32. width: 5em;
  33. height: 8em;
  34. border-radius: 2.5em;
  35. left: 50%;
  36. top: -1em;
  37. margin-left: -2.5em;
  38. }

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

闽ICP备14008679号