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

纯CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等）_长方形变圆形对话框css

作者：IT小白 | 2024-02-16 21:50:56

赞

踩

长方形变圆形对话框css

 

今天在css-tricks上看到一篇文章，那篇文章让我不禁心头一震，强大的CSS啊，居然能画出这么多基本的图形。图形包括基本的矩形、圆形、椭圆、三角形、多边形，也包括稍微复杂一点的爱心、钻石、阴阳八卦等。当然有一些需要用到CSS3的属性，所以在你打开这篇文章的时候，我希望你用的是firefox或者chrome，当然IE也能看一部分的。那好，下面就一起来看看我们是如何用纯CSS来画这些图形的，如果你也觉得很震撼，推荐给你的朋友吧。

1、正方形

最终效果： 

 

CSS代码如下：

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

2、长方形

 最终效果：

 

CSS代码如下：

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

 3、圆形

 最终效果：

 

 

CSS代码如下：

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

4、椭圆 

最终效果：

 

 

CSS代码如下：

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

5、上三角

 最终效果：

 

 

CSS代码如下：

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

 6、下三角 

最终效果：

 

 

CSS代码如下：

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

7、左三角 

最终效果：

 

 

CSS代码如下：

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

8、右三角 

最终效果：

 

 

CSS代码如下： 

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

9、左上三角

 最终效果：

 

 

CSS代码如下：

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

10、右上三角 

最终效果：

 

 

CSS代码如下：

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

 11、左下三角 

最终效果：

 

 

CSS代码如下：

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

12、右下三角 

最终效果：

 

 

CSS代码如下：

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

13、平行四边形 

最终效果：

 

 

CSS代码如下：

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

 14、梯形

 最终效果：

 

 

CSS代码如下：

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

 15、六角星 

最终效果：

 

 

CSS代码如下：

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

16、五角星 

最终效果：

 

 

CSS代码如下：

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

17、五角大楼 

最终效果：

 

 

CSS代码如下：

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

18、六边形 

最终效果：

 

 

 CSS代码如下：

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

19、八角形 

最终效果：

 

 

CSS代码如下：

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

20、爱心 

最终效果：

 

 

CSS代码如下：

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

21、无穷大符号 

最终效果：

 

 

CSS代码如下：

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

22、鸡蛋 

最终效果

 

 

CSS代码如下：

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

 23、食逗人（Pac-Man） 

最终效果：

 

 

CSS代码如下：

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

24、提示对话框

 

 

CSS代码如下：

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

25、12角星 

最终效果：

 

 

 CSS代码如下：

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

26、8角星 

最终效果：

  

CSS代码如下：

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

27、钻石 

最终效果：

 

 

 CSS代码如下：

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

28、阴阳八卦（霸气的这个）

最终效果：

 

 

CSS代码如下：

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

　　好了，就到这里了，一共28个，个人觉得后面几个比较犀利。

如果我的内容能对你有所帮助，我就很开心啦！

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

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

  

闽ICP备14008679号