说明

使用 CSS 可以绘制出许多形状,比如三角形、梯形、圆形、椭圆,等 并不只是可以绘制矩形。下面来看看怎么实现这些形状的吧。
为了容易理解,文章分为基本形状 和 组合形状来说,基本形状是比较容易实现的,而利用这些基本形状进行组合,就可以实现稍微复杂点的组合形状了。

基本形状

三角形

  1. .triangle {
  2. width: 0;
  3. height: 0;
  4. border: 50px solid blue;
  5. /* 通过改变边框颜色,可以改变三角形的方向 */
  6. border-color: blue transparent transparent transparent;
  7. }


梯形

  1. .trapzoid {
  2. width: 40px;
  3. height: 100px;
  4. border: 50px solid blue;
  5. border-color: transparent transparent blue transparent;
  6. }


圆形

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


球体

  1. .sphere {
  2. height: 200px;
  3. width: 200px;
  4. border-radius: 50%;
  5. background: radial-gradient(circle at 70px 70px, #5cabff, #000);
  6. }


椭圆

  1. .ellipse {
  2. width: 200px;
  3. height: 100px;
  4. border-radius: 50%;
  5. background: blue;
  6. }


半圆

  1. .semicircle {
  2. width: 50px;
  3. height: 100px;
  4. /* "/"前四个值表示圆角的水平半径,后四个值表示圆角的垂直半径*/
  5. border-radius: 200% 0 0 200% / 100% 0 0 100%;
  6.  
  7. /* 效果和用%一样 */
  8. /* border-radius: 50px 0 0 50px; */
  9. background: blue;
  10. }


菱形

  1. .rhombus {
  2. width: 200px;
  3. height: 200px;
  4. transform: rotateZ(45deg) skew(30deg, 30deg);
  5. background: blue;
  6. }

组合形状

心形
心形是由两个圆形和一个矩形进行组合得到的。

  1. .heart {
  2. width: 100px;
  3. height: 100px;
  4. transform: rotateZ(45deg);
  5. background: red;
  6. }
  7.  
  8. .heart::after,
  9. .heart::before {
  10. content: "";
  11. width: 100%;
  12. height: 100%;
  13. border-radius: 50%;
  14. display: block;
  15. background: red;
  16. position: absolute;
  17. top: -50%;
  18. left: 0;
  19. }
  20.  
  21. .heart::before {
  22. top: 0;
  23. left: -50%;
  24. }

扇形
扇形是由一个圆形和一个矩形进行组合得到的,用矩形遮住圆形的一部分就形成了扇形。

  1. .sector {
  2. width: 142px;
  3. height: 142px;
  4. background: #fff;
  5. border-radius: 50%;
  6. background-image: linear-gradient(to right, transparent 50%, #655 0);
  7. }
  8.  
  9. .sector::before {
  10. content: '';
  11. display: block;
  12. margin-left: 50%;
  13. height: 100%;
  14. width: 100%;
  15. background-color: inherit;
  16. transform-origin: left;
  17. /*调整角度,改变扇形大小*/
  18. transform: rotate(230deg);
  19. }

五边形
五边形是由一个三角形和一个梯形进行组合得到的。

  1. .pentagonal {
  2. width: 100px;
  3. position: relative;
  4. border-width: 105px 50px 0;
  5. border-style: solid;
  6. border-color: blue transparent;
  7. }
  8.  
  9. .pentagonal:before {
  10. content: "";
  11. position: absolute;
  12. width: 0;
  13. height: 0;
  14. top: -185px;
  15. left: -50px;
  16. border-width: 0px 100px 80px;
  17. border-style: solid;
  18. border-color: transparent transparent blue;
  19. }

六边形
六边形是由两个三角形和一个矩形进行组合得到的。

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

长方体
长方体是由六个矩形进行组合得到的。

  1. .cuboid {
  2. width: 200px;
  3. height: 200px;
  4. transform-style: preserve-3d;
  5. transform: rotateX(-30deg) rotateY(-80deg);
  6. }
  7.  
  8. .cuboid div {
  9. position: absolute;
  10. width: 200px;
  11. height: 200px;
  12. opacity: 0.8;
  13. transition: .4s;
  14. }
  15.  
  16. .cuboid .front {
  17. transform: rotateY(0deg) translateZ(100px);
  18. background: #a3daff;
  19. }
  20.  
  21. .cuboid .back {
  22. transform: translateZ(-100px) rotateY(180deg);
  23. background: #a3daff;
  24. }
  25.  
  26. .cuboid .left {
  27. transform: rotateY(-90deg) translateZ(100px);
  28. background: #1ec0ff;
  29. }
  30.  
  31. .cuboid .right {
  32. transform: rotateY(90deg) translateZ(100px);
  33. background: #1ec0ff;
  34. }
  35.  
  36. .cuboid .top {
  37. transform: rotateX(90deg) translateZ(100px);
  38. background: #0080ff;
  39. }
  40.  
  41. .cuboid .bottom {
  42. transform: rotateX(-90deg) translateZ(100px);
  43. background: #0080ff;
  44. }
  45.  
  46. <div class="cuboid">
  47. <!--前面 -->
  48. <div class="front"></div>
  49. <!--后面 -->
  50. <div class="back"></div>
  51. <!--左面 -->
  52. <div class="left"></div>
  53. <!--右面 -->
  54. <div class="right"></div>
  55. <!--上面 -->
  56. <div class="top"></div>
  57. <!--下面 -->
  58. <div class="bottom"></div>
  59. </div>

圆柱体
圆柱体是由一个椭圆和一个圆角矩形进行组合得到的。

  1. .cylinder {
  2. position: relative;
  3. transform: rotateX(70deg);
  4. }
  5.  
  6. .ellipse {
  7. width: 100px;
  8. height: 100px;
  9. background: deepskyblue;
  10. border-radius: 50px;
  11. }
  12.  
  13. .rectangle {
  14. width: 100px;
  15. height: 400px;
  16. position: absolute;
  17. opacity: 0.6;
  18. background: deepskyblue;
  19. top: 0;
  20. left: 0;
  21. border-radius: 50px;
  22. z-index: -1;
  23. }
  24.  
  25. <div class="cylinder">
  26. <div class="ellipse"></div>
  27. <div class="rectangle"></div>
  28. </div>

如果使用了渐变色,看上去会更像一些。

  1. background-image: linear-gradient(to right, rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.2) 100%);

棱锥
棱锥是由四个三角形和一个矩形进行组合得到的。

  1. .pyramid {
  2. width: 200px;
  3. height: 200px;
  4. transform-style: preserve-3d;
  5. transform: rotateX(-30deg) rotateY(-80deg);
  6. }
  7. .pyramid div {
  8. position: absolute;
  9. top: -100px;
  10. width: 0px;
  11. height: 0px;
  12. border: 100px solid transparent;
  13. border-bottom-width: 200px;
  14. opacity: 0.8;
  15. }
  16.  
  17. .pyramid .front {
  18. transform: translateZ(100px) rotateX(30deg);
  19. border-bottom-color: #a3daff;
  20. transform-origin: 0 100%;
  21. }
  22.  
  23. .pyramid .back {
  24. transform: translateZ(-100px) rotateX(-30deg);
  25. border-bottom-color: #1ec0ff;
  26. transform-origin: 0 100%;
  27. }
  28.  
  29. .pyramid .left {
  30. transform: translateX(-100px) rotateZ(30deg) rotateY(90deg);
  31. border-bottom-color: #0080ff;
  32. transform-origin: 50% 100%;
  33. }
  34.  
  35. .pyramid .right {
  36. transform: translateX(100px) rotateZ(-30deg) rotateY(90deg);
  37. border-bottom-color: #03a6ff;
  38. transform-origin: 50% 100%;
  39. }
  40.  
  41. .pyramid .bottom {
  42. transform: translateX(-100px) rotateZ(90deg) rotateY(90deg);
  43. background: cyan;
  44. width: 200px;
  45. height: 200px;
  46. border: 0;
  47. top: 0;
  48. transform-origin: 50% 100%;
  49. }
  50. <div class="pyramid">
  51. <!--前面 -->
  52. <div class="front"></div>
  53. <!--后面 -->
  54. <div class="back"></div>
  55. <!--左面 -->
  56. <div class="left"></div>
  57. <!--右面 -->
  58. <div class="right"></div>
  59.  
  60. <!--下面 -->
  61. <div class="bottom"></div>
  62. </div>

总结

文中实现的各种形状,也许你觉得实现的很复杂,其实你也可以使用 clip-path 这一个属性,绘制各种形状。
CSS 能绘制的东西,不仅仅只有这些,还有很多很多,文中都没有说出来,而即便是文中已经实现的形状也不只有一种实现方式,有兴趣的小伙伴可以继续去探索。

最后

这里有一个使用各种形状进行组合,形成魔法阵的例子。

我们还可以给魔法阵中的形状增加动画,使魔法阵看上去更有趣。

来源:https://juejin.im/post/5c9cbddc5188252d812c6526

作者 铁血 汉子 2020年1月10日
2025/07/04/05:07:20am 2020/1/10/14:31:29
0 1914