45个值得收藏的CSS形状

CSS能够生成各种形状。正方形和矩形很容易，因为它们是 web 的自然形状。添加宽度和高度，就得到了所需的精确大小的矩形。添加边框半径，你就可以把这个形状变成圆形，足够多的边框半径，你就可以把这些矩形变成圆形和椭圆形。

成都创新互联专注于企业全网营销推广、网站重做改版、漾濞网站定制设计、自适应品牌网站建设、H5建站、商城网站开发、集团公司官网建设、外贸网站建设、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为漾濞等各大城市提供网站开发制作服务。

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

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

1.正方形

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

2.长方形

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

3.圆形

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

4.椭圆形

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

5.上三角

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

6.下三角

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

7.左三角

 
 
 
 
      
  
  
  
  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.

8.右三角

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

9.左上角

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

10.右上角

 
 
 
 
      
  
  
  
  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.

11.左下角

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

12.右下角

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

13.箭头

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

14.梯形

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

15.平行四边形

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

16.星星 (6角)

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

17.星星 (5角)

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

18.五边形

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

19.六边形

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

20.八边形

 
 
 
 
      
  
  
  
  1. #octagon {  
    2.   
  
  
  
  2. width: 100px;  
    3.   
  
  
  
  3. height: 100px;  
    4.   
  
  
  
  4. background: red;  
    5.   
  
  
  
  5. position: relative;  
    6.   
  
  
  
  6. }  
    7.   
  
  
  
  7. #octagon:before {  
    8.   
  
  
  
  8. content: "";  
    9.   
  
  
  
  9. width: 100px;  
    10.   
  
  
  
  10. height: 0;  
    11.   
  
  
  
  11. position: absolute;  
    12.   
  
  
  
  12. top: 0;  
    13.   
  
  
  
  13. left: 0;  
    14.   
  
  
  
  14. border-bottom: 29px solid red;  
    15.   
  
  
  
  15. border-left: 29px solid #eee;  
    16.   
  
  
  
  16. border-right: 29px solid #eee;  
    17.   
  
  
  
  17. }  
    18.   
  
  
  
  18. #octagon:after {  
    19.   
  
  
  
  19. content: "";  
    20.   
  
  
  
  20. width: 100px;  
    21.   
  
  
  
  21. height: 0;  
    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. }  
    29.

21.爱心

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

22.无穷大

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

23.菱形

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

24.钻石

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

25.钻戒

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

26.钻石2

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

27.蛋蛋

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

28.吃豆人

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

29.对话泡泡

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

30. 12点 爆发

 
 
 
 
      
  
  
  
  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,  
    9.   
  
  
  
  9. #burst-12:after {  
    10.   
  
  
  
  10. content: "";  
    11.   
  
  
  
  11. position: absolute;  
    12.   
  
  
  
  12. top: 0;  
    13.   
  
  
  
  13. left: 0;  
    14.   
  
  
  
  14. height: 80px;  
    15.   
  
  
  
  15. width: 80px;  
    16.   
  
  
  
  16. background: red;  
    17.   
  
  
  
  17. }  
    18.   
  
  
  
  18. #burst-12:before {  
    19.   
  
  
  
  19. transform: rotate(30deg);  
    20.   
  
  
  
  20. }  
    21.   
  
  
  
  21. #burst-12:after {  
    22.   
  
  
  
  22. transform: rotate(60deg);  
    23.   
  
  
  
  23. }  
    24.

31. 8点 爆发

 
 
 
 
      
  
  
  
  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. transform: rotate(20deg);  
    8.   
  
  
  
  8. }  
    9.   
  
  
  
  9. #burst-8:before {  
    10.   
  
  
  
  10. content: "";  
    11.   
  
  
  
  11. position: absolute;  
    12.   
  
  
  
  12. top: 0;  
    13.   
  
  
  
  13. left: 0;  
    14.   
  
  
  
  14. height: 80px;  
    15.   
  
  
  
  15. width: 80px;  
    16.   
  
  
  
  16. background: red;  
    17.   
  
  
  
  17. transform: rotate(135deg);  
    18.   
  
  
  
  18. }  
    19.

32.太极

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

33.徽章丝带

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

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

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

35.电视

 
 
 
 
      
  
  
  
  1. #tv {  
    2.   
  
  
  
  2. position: relative;  
    3.   
  
  
  
  3. width: 200px;  
    4.   
  
  
  
  4. height: 150px;  
    5.   
  
  
  
  5. margin: 20px 0;  
    6.   
  
  
  
  6. background: red;  
    7.   
  
  
  
  7. border-radius: 50% / 10%;  
    8.   
  
  
  
  8. color: white;  
    9.   
  
  
  
  9. text-align: center;  
    10.   
  
  
  
  10. text-indent: .1em;  
    11.   
  
  
  
  11. }  
    12.   
  
  
  
  12. #tv:before {  
    13.   
  
  
  
  13. content: '';  
    14.   
  
  
  
  14. position: absolute;  
    15.   
  
  
  
  15. top: 10%;  
    16.   
  
  
  
  16. bottom: 10%;  
    17.   
  
  
  
  17. right: -5%;  
    18.   
  
  
  
  18. left: -5%;  
    19.   
  
  
  
  19. background: inherit;  
    20.   
  
  
  
  20. border-radius: 5% / 50%;  
    21.   
  
  
  
  21. }  
    22.

36.雪佛龙

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

37.放大镜

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

38.Facebook图标

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

39.月亮

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

40.旗

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

41.圆锥

 
 
 
 
      
  
  
  
  1. #cone {  
    2.   
  
  
  
  2. width: 0;  
    3.   
  
  
  
  3. height: 0;  
    4.   
  
  
  
  4. border-left: 70px solid transparent;  
    5.   
  
  
  
  5. border-right: 70px solid transparent;  
    6.   
  
  
  
  6. border-top: 100px solid red;  
    7.   
  
  
  
  7. border-radius: 50%;  
    8.   
  
  
  
  8. }  
    9.

42.十字架

 
 
 
 
      
  
  
  
  1. #cross {  
    2.   
  
  
  
  2. background: red;  
    3.   
  
  
  
  3. height: 100px;  
    4.   
  
  
  
  4. position: relative;  
    5.   
  
  
  
  5. width: 20px;  
    6.   
  
  
  
  6. }  
    7.   
  
  
  
  7. #cross:after {  
    8.   
  
  
  
  8. background: red;  
    9.   
  
  
  
  9. content: "";  
    10.   
  
  
  
  10. height: 20px;  
    11.   
  
  
  
  11. left: -40px;  
    12.   
  
  
  
  12. position: absolute;  
    13.   
  
  
  
  13. top: 40px;  
    14.   
  
  
  
  14. width: 100px;  
    15.   
  
  
  
  15. }  
    16.

43.根基

 
 
 
 
      
  
  
  
  1. #base {  
    2.   
  
  
  
  2. background: red;  
    3.   
  
  
  
  3. display: inline-block;  
    4.   
  
  
  
  4. height: 55px;  
    5.   
  
  
  
  5. margin-left: 20px;  
    6.   
  
  
  
  6. margin-top: 55px;  
    7.   
  
  
  
  7. position: relative;  
    8.   
  
  
  
  8. width: 100px;  
    9.   
  
  
  
  9. }  
    10.   
  
  
  
  10. #base:before {  
    11.   
  
  
  
  11. border-bottom: 35px solid red;  
    12.   
  
  
  
  12. border-left: 50px solid transparent;  
    13.   
  
  
  
  13. border-right: 50px solid transparent;  
    14.   
  
  
  
  14. content: "";  
    15.   
  
  
  
  15. height: 0;  
    16.   
  
  
  
  16. left: 0;  
    17.   
  
  
  
  17. position: absolute;  
    18.   
  
  
  
  18. top: -35px;  
    19.   
  
  
  
  19. width: 0;  
    20.   
  
  
  
  20. }  
    21.

44.指示器

 
 
 
 
      
  
  
  
  1. #pointer {  
    2.   
  
  
  
  2. width: 200px;  
    3.   
  
  
  
  3. height: 40px;  
    4.   
  
  
  
  4. position: relative;  
    5.   
  
  
  
  5. background: red;  
    6.   
  
  
  
  6. }  
    7.   
  
  
  
  7. #pointer:after {  
    8.   
  
  
  
  8. content: "";  
    9.   
  
  
  
  9. position: absolute;  
    10.   
  
  
  
  10. left: 0;  
    11.   
  
  
  
  11. bottom: 0;  
    12.   
  
  
  
  12. width: 0;  
    13.   
  
  
  
  13. height: 0;  
    14.   
  
  
  
  14. border-            
    
                文章题目：45个值得收藏的CSS形状
                
    
                分享链接：http://www.shufengxianlan.com/qtweb/news41/162541.html
            
    
            
    
                网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等
                                
    
            
    
                广告
                
            
    
            
    
                声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：
                创新互联

猜你还喜欢下面的内容

面包屑导航知识

各行业网站

网站免费收录　　 　渠县网站建设　　 　彭山网站制作　　 　成都网站建设　　 　网站推广　　 　成都网站SEO优化公司　　 　成都主机托管　　 　成都企业网站维护　　 　微信小程序　　 　西云主机托管　　 　雅安服务器托管　　 　东电技服　　 　中晴建设　　 　bgp机房托管　　 　广安园林景观设计　　 　成都广告公司　　 　四川成都网站制作　　 　成都多线机房　　 　成都定制网站　　 　营销型网站建设