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

【推荐】生成各种形状样式CSS代码！！！_自定义形状生成对应css代码

作者：笔触狂放9 | 2024-02-16 21:52:33

赞

踩

自定义形状生成对应css代码

目录

1、圆形

2、正方形

3、长方形

4、圆角形

5、椭圆形

6、三角形

7、左三角形

8、右三角形

9、上三角形

10、下三角形

11、左上三角形

12、右上三角形

13、左下三角形

14、右下三角形

15、平行四边形

16、梯形

17、菱形

18、五边形

19、星形

20、六边形

21、八边形

22、心形

23、无穷符号

1、圆形

  1. .cssshape {
  2.     width: 180px;
  3.     height: 180px;
  4.     background: #f335f7;
  5.     -moz-border-radius: 90px;
  6.     -webkit-border-radius: 90px;
  7.     border-radius: 90px;
  8. }

2、正方形

  1. .cssshape {
  2.     width: 180px;
  3.     height: 180px;
  4.     background: #f335f7;
  5. }

3、长方形

  1. .cssshape {
  2.     width: 260px;
  3.     height: 180px;
  4.     background: #f335f7;
  5. }

4、圆角形

  1. .cssshape {
  2.     width: 180px;
  3.     height: 180px;
  4.     background: #f335f7;
  5.     -moz-border-radius: 60px;
  6.     -webkit-border-radius: 60px;
  7.     border-radius: 60px;
  8. }

5、椭圆形

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

6、三角形

  1. .cssshape {
  2.     width: 0;
  3.     height: 0;
  4.     border-bottom: 140px solid #f335f7;
  5.     border-left: 70px solid transparent;
  6.     border-right: 70px solid transparent;
  7. }

7、左三角形

  1. .cssshape {
  2.     width: 0;
  3.     height: 0;
  4.     border-top: 70px solid transparent;
  5.     border-right: 140px solid #f335f7;
  6.     border-bottom: 70px solid transparent;
  7. }

8、右三角形

  1. .cssshape {
  2.     width: 0;
  3.     height: 0;
  4.     border-top: 70px solid transparent;
  5.     border-left: 140px solid #f335f7;
  6.     border-bottom: 70px solid transparent;
  7. }

9、上三角形

  1. .cssshape {
  2.     display:inline-block;
  3.     width:0;
  4.     height:0;
  5.     border-left:30px solid transparent;
  6.     border-right: 30px solid transparent;
  7.     border-bottom:50px solid #f335f7;
  8. }

10、下三角形

  1. .cssshape {
  2.     display:inline-block;
  3.     width:0;
  4.     height:0;
  5.     border-left:30px solid transparent;
  6.     border-right: 30px solid transparent;
  7.     border-top:50px solid #f335f7;
  8. }

11、左上三角形

  1. .cssshape {
  2.     display:inline-block;
  3.     width: 0;
  4.     height: 0;
  5.     border-top: 50px solid #f335f7;
  6.     border-right: 50px solid transparent;
  7. }

12、右上三角形

  1. .cssshape {
  2.     display:inline-block;
  3.     width: 0;
  4.     height: 0;
  5.     border-top: 50px solid #f335f7;
  6.     border-left: 50px solid transparent;
  7. }

13、左下三角形

  1. .cssshape {
  2.     display:inline-block;
  3.     width: 0;
  4.     height: 0;
  5.     border-bottom: 50px solid #f335f7;
  6.     border-right: 50px solid transparent;
  7. }

14、右下三角形

  1. .cssshape {
  2.     display:inline-block;
  3.     width: 0;
  4.     height: 0;
  5.     border-bottom: 50px solid #f335f7;
  6.     border-left: 50px solid transparent;
  7. }

15、平行四边形

  1. .cssshape {
  2.     width: 160px;
  3.     height: 100px;
  4.     background: #f335f7;
  5.     -webkit-transform: skew(30deg);
  6.     -moz-transform: skew(30deg);
  7.     -o-transform: skew(30deg);
  8.     transform: skew(30deg);
  9. }

16、梯形

  1. .cssshape {
  2.     height: 0;
  3.     width: 180px;
  4.     border-bottom: 180px solid #f335f7;
  5.     border-left: 60px solid transparent;
  6.     border-right: 60px solid transparent;
  7. }

17、菱形

  1. .cssshape {
  2.     width: 180px;
  3.     height: 180px;
  4.     background: #f335f7;
  5.     /* Rotate */    
  6.     -webkit-transform: rotate(-45deg);
  7.     -moz-transform: rotate(-45deg);
  8.     -ms-transform: rotate(-45deg);
  9.     -o-transform: rotate(-45deg);
  10.     transform: rotate(-45deg);
  11.     /* Rotate Origin */    
  12.     -webkit-transform-origin: 0 100%;
  13.     -moz-transform-origin: 0 100%;
  14.     -ms-transform-origin: 0 100%;
  15.     -o-transform-origin: 0 100%;
  16.     transform-origin: 0 100%;
  17.     margin: 60px 0 10px 310px;
  18. }

18、五边形

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

19、星形

  1. .cssshape {
  2.     width: 0;
  3.     height: 0;
  4.     margin: 50px 0;
  5.     color: #f335f7;
  6.     position: relative;
  7.     display: block;
  8.     border-right: 100px solid transparent;
  9.     border-bottom: 70px solid #f335f7;
  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. .cssshape:before{
  17.     height: 0;
  18.     width: 0;
  19.     position: absolute;
  20.     display: block;
  21.     top: -45px;
  22.     left: -65px;
  23.     border-bottom: 80px solid #f335f7;
  24.     border-left: 30px solid transparent;
  25.     border-right: 30px solid transparent;
  26.     content: '';
  27.     -webkit-transform: rotate(-35deg);
  28.     -moz-transform: rotate(-35deg);
  29.     -ms-transform: rotate(-35deg);
  30.     -o-transform: rotate(-35deg);
  31. }
  32. .cssshape:after{
  33.     content: '';
  34.     width: 0;
  35.     height: 0;
  36.     position: absolute;
  37.     display: block;
  38.     top: 3px;
  39.     left: -105px;
  40.     color: #f335f7;
  41.     border-right: 100px solid transparent;
  42.     border-bottom: 70px solid #f335f7;
  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. }

20、六边形

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

21、八边形

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

22、心形

  1. .cssshape {
  2.     position: relative;
  3. }
  4.  
  5. .cssshape:before,
  6. .cssshape:after {
  7.     content: "";
  8.     width: 70px;
  9.     height: 115px;
  10.     position: absolute;
  11.     background: #f335f7;
  12.     left: 70px;
  13.     top: 0;
  14.     -webkit-border-radius: 50px 50px 0 0;
  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. }
  28.  
  29. .cssshape:after {
  30.     left: 0;
  31.     -webkit-transform: rotate(45deg);
  32.     -moz-transform: rotate(45deg);
  33.     -ms-transform: rotate(45deg);
  34.     -o-transform: rotate(45deg);
  35.     transform: rotate(45deg);
  36.     -webkit-transform-origin: 100% 100%;
  37.     -moz-transform-origin: 100% 100%;
  38.     -ms-transform-origin: 100% 100%;
  39.     -o-transform-origin: 100% 100%;
  40.     transform-origin: 100% 100%;
  41. }

23、无穷符号

  1. .cssshape {
  2.     width: 220px;
  3.     height: 100px;
  4.     position: relative;
  5. }
  6.  
  7. .cssshape:before,
  8. .cssshape:after {
  9.     content: "";
  10.     width: 60px;
  11.     height: 60px;
  12.     position: absolute;
  13.     top: 0;
  14.     left: 0;
  15.     border: 20px solid #f335f7;
  16.     -moz-border-radius: 50px 50px 0;
  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. }
  24.  
  25. .cssshape: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. }

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

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

  

闽ICP备14008679号