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

css 常见图形绘制_css shape-sub

作者：盐析白兔 | 2024-02-16 21:51:55

赞

踩

css shape-sub

 1.心形

  1. // 心形
  2. <div class="shape-sub"></div>
  3.  
  4. .shape-sub:before,.shape-sub:after{
  5.   content: "";
  6.   position: absolute;
  7.   left:50px;
  8.   top:0;
  9.   width:50px;
  10.   height:80px;
  11.   background:red;
  12.   border-radius: 50px 50px 0;
  13.   transform:rotate(-45deg);
  14.   transform-origin: 0 100%;
  15. }
  16.  
  17. .shape-sub:after{
  18.   left:0;
  19.   transform: rotate(45deg);
  20.   transform-origin:100% 100%;
  21. }

2.三角形

                                      

  1. // 三角形
  2. <div class="triangle-up">向上</div>
  3.  
  4. <div class="triangle-down">向下</div>
  5.  
  6. <div class="triangle-left">向左</div>
  7.  
  8. <div class="triangle-right">向右</div>
  9.  
  10. .triangle-up{
  11.   width: 0;
  12.   height: 0;
  13.   border-left: 30px solid transparent;
  14.   border-right: 30px solid transparent;
  15.   border-bottom: 30px solid red;
  16. }
  17.  
  18.  
  19. .triangle-down {
  20.   width: 0;
  21.   height: 0;
  22.   border-left: 30px solid transparent;
  23.   border-right: 30px solid transparent;
  24.   border-top: 30px solid red;
  25. }
  26.  
  27.  
  28. .triangle-left {
  29.   width: 0;
  30.   height: 0;
  31.   border-top: 30px solid transparent;
  32.   border-bottom: 30px solid transparent;
  33.   border-right: 30px solid red;
  34. }
  35.  
  36.  
  37. .triangle-right {
  38.   width: 0; 
  39.   height: 0; 
  40.   border-top: 30px solid transparent; 
  41.   border-left: 30px solid red; 
  42.   border-bottom: 30px solid transparent;
  43. }

3.菱形

            

  1. // 菱形
  2. <div class="shape-sub1"></div>
  3. <div class="shape-sub2"></div>
  4.  
  5. .shape-sub1 {
  6.   width: 100px;
  7.   height: 60px;
  8.   margin: 50px 0 0 50px;
  9.   transform: skew(30deg);
  10.   background: red;
  11. }
  12.  
  13.  
  14. .shape-sub2 {
  15.   width: 100px;
  16.   height: 60px;
  17.   margin: 50px 0 0 50px;
  18.   transform: skew(-30deg);
  19.   background: red;
  20. }

4.五角星

 

  1. // 五角星
  2. <div class="shape-sub5"></div>
  3.  
  4. .shape-sub5 {
  5.   display: block;
  6.   position: relative;
  7.   margin: 60px 0;
  8.   color:red; 
  9.   width: 0; 
  10.   height: 0;
  11.   border-right: 100px solid transparent;
  12.   border-bottom: 70px solid red;
  13.   border-left: 100px solid transparent;
  14.   transform: rotate(35deg);
  15.  
  16. }
  17.  
  18. .shape-sub5:before{
  19.   position: absolute;
  20.   top:-45px;
  21.   left:-65px;
  22.   border-left: 30px solid transparent;
  23.   border-right: 30px solid transparent;
  24.   border-bottom: 80px solid red;
  25.   height:0;
  26.   width:0;
  27.   display: block;
  28.   content:"";
  29.   transform: rotate(-35deg);
  30. }
  31.  
  32. .shape-sub5:after{
  33.   content:'';
  34.   display: block;
  35.   position: absolute;
  36.   top: 3px;
  37.   left: -105px;
  38.   color: red;
  39.   width:0;
  40.   height:0;
  41.   border-right: 100px solid transparent;
  42.   border-bottom:70px solid red;
  43.   border-left: 100px solid transparent;
  44.   transform:rotate(-70deg);
  45. }

5.梯形

 

  1. // 梯形
  2. <div class="shape-sub3"></div>
  3.  
  4. .shape-sub3 { 
  5.   width: 60px;
  6.   height: 0;
  7.   margin: 50px 0 0 50px;
  8.   border-left: 30px solid transparent;
  9.   border-right: 30px solid transparent;
  10.   border-bottom: 60px solid red;
  11. }

6.椭圆形

  1. // 椭圆形
  2. <div class="ellipse"></div>
  3.  
  4. .ellipse {
  5.   width: 200px;
  6.   height: 100px;
  7.   background: red;
  8.   border-radius: 100px / 50px;
  9. }

7.无限形

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

8.钻石形

  1. // 钻石形
  2. <div class="cut-diamond"></div>
  3.  
  4. .cut-diamond {
  5.   border-style: solid;
  6.   border-color: transparent transparent red transparent;
  7.   border-width: 0 25px 25px 25px;
  8.   height: 0;
  9.   width: 50px;
  10.   box-sizing: content-box;
  11.   position: relative;
  12.   margin: 20px 0 50px 0;
  13. }
  14. .cut-diamond:after {
  15.   content: "";
  16.   position: absolute;
  17.   top: 25px;
  18.   left: -25px;
  19.   width: 0;
  20.   height: 0;
  21.   border-style: solid;
  22.   border-color: red transparent transparent transparent;
  23.   border-width: 70px 50px 0 50px;
  24. }

9.蛋形

  1. // 蛋形
  2. <div class="egg"></div>
  3.  
  4. .egg {
  5.   display: block;
  6.   width: 126px;
  7.   height: 180px;
  8.   background-color: red;
  9.   border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  10. }

10.吃人豆

  1. // 吃人豆
  2. <div class="pacman"></div>
  3.  
  4. .pacman {
  5.   width: 0px; height: 0px;
  6.   border-right: 60px solid transparent;
  7.   border-top: 60px solid red;
  8.   border-left: 60px solid red;
  9.   border-bottom: 60px solid red;
  10.   border-top-left-radius: 60px;
  11.   border-top-right-radius: 60px;
  12.   border-bottom-left-radius: 60px;
  13.   border-bottom-right-radius: 60px;
  14. }

11.气泡

  1. // 气泡
  2. <div class="talkbubble"></div>
  3.  
  4. .talkbubble {
  5.   width: 120px; height: 80px;
  6.   background: red;
  7.   position: relative;
  8.   border-radius: 10px;
  9. }
  10.  
  11. .talkbubble:before {
  12.   content: "";
  13.   position: absolute;
  14.   right: 100%; top: 26px;
  15.   border-top: 13px solid transparent;
  16.   border-right: 26px solid red;
  17.   border-bottom: 13px solid transparent;
  18. }

12.八卦

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

13.放大镜

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

14.月亮

  1. // 月亮
  2. <div class="moon"></div>
  3.  
  4. .moon {
  5.   width: 80px; height: 80px;
  6.   border-radius: 50%;
  7.   box-shadow: 15px 15px 0 0 red;
  8. }

15.圆锥形

  1. // 圆锥形
  2. <div class="cone"></div>
  3.  
  4. .cone {
  5.   width: 0; height: 0;
  6.   border-left: 70px solid transparent;
  7.   border-right: 70px solid transparent;
  8.   border-top: 100px solid red;
  9.   border-radius: 50%;
  10. }

16.指向图形

  1. // 指向图形
  2. <div class="pointer "></div>
  3.  
  4. .pointer {
  5.   width: 100px; height: 40px;
  6.   position: relative;
  7.   background: red;
  8. }
  9. .pointer:after {
  10.   content: "";
  11.   position: absolute;
  12.   left: 0; bottom: 0;
  13.   border-left: 20px solid white;
  14.   border-top: 20px solid transparent;
  15.   border-bottom: 20px solid transparent;
  16. }
  17. .pointer:before {
  18.   content: "";
  19.   position: absolute;
  20.   right: -20px; bottom: 0;
  21.   border-left: 20px solid red;
  22.   border-top: 20px solid transparent;
  23.   border-bottom: 20px solid transparent;
  24. }

17.加号

  1. // 加号
  2. <div class="cross"></div>
  3.  
  4. .cross {
  5.   background: red;
  6.   width: 20px; height: 100px;
  7.   position: relative;
  8. }
  9. .cross:after {
  10.   background: red;
  11.   content: "";
  12.   width: 100px; height: 20px;
  13.   position: absolute;
  14.   left: -40px; top: 40px;
  15. }

18.指向箭头

  1. // 指向箭头
  2. <div class="curvedarrow"></div>
  3.  
  4. .curvedarrow {
  5.   position: relative;
  6.   width: 0;
  7.   border-top: 45px solid transparent;
  8.   border-right: 45px solid red;
  9.   transform: rotate(5deg) translateX(100%);
  10. }
  11. .curvedarrow:after {
  12.   content: "";
  13.   position: absolute;
  14.   border: 0 solid transparent;
  15.   border-top: 20px solid red;
  16.   border-radius: 100px 0 0 0;
  17.   top: -60px; left: -45px;
  18.   width: 60px; height: 60px;
  19.   transform: rotate(45deg);
  20. }

19.旗帜

  1. // 旗帜
  2. <div class="flag"></div>
  3.  
  4. .flag {
  5.   width: 80px;
  6.   height: 56px;
  7.   padding-top: 22px;
  8.   position: relative;
  9.   background: red;
  10. }
  11. .flag:after {
  12.     content: "";
  13.     position: absolute;
  14.     left: 0;
  15.     bottom: 0;
  16.     border-bottom: 35px solid #fff;
  17.     border-left: 40px solid transparent;
  18.     border-right: 42px solid transparent;
  19. }

20.锁

  1. // 锁
  2. <div class="lock"></div>
  3.  
  4. .lock {
  5.   font-size: 8px;
  6.   position: relative;
  7.   width: 18em; height: 13em;
  8.   border-radius: 2em;
  9.   top: 10em;
  10.   box-sizing: border-box;
  11.   border: 3.5em solid red;
  12.   border-right-width: 7.5em;
  13.   border-left-width: 7.5em;
  14.   margin: 0 0 6rem 0;
  15. }
  16. .lock:before {
  17.   content: "";
  18.   box-sizing: border-box;
  19.   position: absolute;
  20.   border: 2.5em solid red;
  21.   width: 14em; height: 12em;
  22.   left: 50%;
  23.   margin-left: -7em; 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; height: 8em;
  33.   border-radius: 2.5em;
  34.   left: 50%; top: -1em;
  35.   margin-left: -2.5em;
  36. }
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/97021
推荐阅读
相关标签

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

  

闽ICP备14008679号