创意无限：纯CSS打造各种形状钻石

       网页因为 CSS 而呈现千变万化的风格。这一看似简单的样式语言在使用中非常灵活，只要你发挥创意就能实现很多比人想象不到的效果。特别是随着 CSS3 的广泛使用，更多新奇的 CSS 作品涌现出来。本文给大家带来 CSS 在网页中以及图形绘制中的使用。这篇文章给大家带来的是纯 CSS 绘制数学中的各种形状的砖石等。

1. #infinity {
   
2. 
   
3.     position: relative;
   
4. 
   
5.     width: 212px;
   
6. 
   
7.     height: 100px;
   
8. 
   
9. }
   
10. 
    
11. 
    
12. 
    
13. #infinity:before,
    
14. 
    
15. #infinity:after {
    
16. 
    
17.     content: "";
    
18. 
    
19.     position: absolute;
    
20. 
    
21.     top: 0;
    
22. 
    
23.     left: 0;
    
24. 
    
25.     width: 60px;
    
26. 
    
27.     height: 60px;
    
28. 
    
29.     border: 20px solid red;
    
30. 
    
31.     -moz-border-radius: 50px 50px 0 50px;
    
32. 
    
33.          border-radius: 50px 50px 0 50px;
    
34. 
    
35.     -webkit-transform: rotate(-45deg);
    
36. 
    
37.        -moz-transform: rotate(-45deg);
    
38. 
    
39.         -ms-transform: rotate(-45deg);
    
40. 
    
41.          -o-transform: rotate(-45deg);
    
42. 
    
43.             transform: rotate(-45deg);
    
44. 
    
45. }
    
46. 
    
47. 
    
48. 
    
49. #infinity:after {
    
50. 
    
51.     left: auto;
    
52. 
    
53.     right: 0;
    
54. 
    
55.     -moz-border-radius: 50px 50px 50px 0;
    
56. 
    
57.          border-radius: 50px 50px 50px 0;
    
58. 
    
59.     -webkit-transform: rotate(45deg);
    
60. 
    
61.        -moz-transform: rotate(45deg);
    
62. 
    
63.         -ms-transform: rotate(45deg);
    
64. 
    
65.          -o-transform: rotate(45deg);
    
66. 
    
67.             transform: rotate(45deg);
    
68. 
    
69. }

复制代码

1. #diamond {
   
2. 
   
3.     width: 0;
   
4. 
   
5.     height: 0;
   
6. 
   
7.     border: 50px solid transparent;
   
8. 
   
9.     border-bottom-color: red;
   
10. 
    
11.     position: relative;
    
12. 
    
13.     top: -50px;
    
14. 
    
15. }
    
16. 
    
17. #diamond:after {
    
18. 
    
19.     content: '';
    
20. 
    
21.     position: absolute;
    
22. 
    
23.     left: -50px;
    
24. 
    
25.     top: 50px;
    
26. 
    
27.     width: 0;
    
28. 
    
29.     height: 0;
    
30. 
    
31.     border: 50px solid transparent;
    
32. 
    
33.     border-top-color: red;
    
34. 
    
35. }

复制代码

1. #diamond-shield {
   
2. 
   
3.     width: 0;
   
4. 
   
5.     height: 0;
   
6. 
   
7.     border: 50px solid transparent;
   
8. 
   
9.     border-bottom: 20px solid red;
   
10. 
    
11.     position: relative;
    
12. 
    
13.     top: -50px;
    
14. 
    
15. }
    
16. 
    
17. #diamond-shield:after {
    
18. 
    
19.     content: '';
    
20. 
    
21.     position: absolute;
    
22. 
    
23.     left: -50px; top: 20px;
    
24. 
    
25.     width: 0;
    
26. 
    
27.     height: 0;
    
28. 
    
29.     border: 50px solid transparent;
    
30. 
    
31.     border-top: 70px solid red;
    
32. 
    
33. }

复制代码

1. #diamond-narrow {
   
2. 
   
3.     width: 0;
   
4. 
   
5.     height: 0;
   
6. 
   
7.     border: 50px solid transparent;
   
8. 
   
9.     border-bottom: 70px solid red;
   
10. 
    
11.     position: relative;
    
12. 
    
13.     top: -50px;
    
14. 
    
15. }
    
16. 
    
17. #diamond-narrow:after {
    
18. 
    
19.     content: '';
    
20. 
    
21.     position: absolute;
    
22. 
    
23.     left: -50px; top: 70px;
    
24. 
    
25.     width: 0;
    
26. 
    
27.     height: 0;
    
28. 
    
29.     border: 50px solid transparent;
    
30. 
    
31.     border-top: 70px solid red;
    
32. 
    
33. }

复制代码

1. #cut-diamond {
   
2. 
   
3.     border-style: solid;
   
4. 
   
5.     border-color: transparent transparent red transparent;
   
6. 
   
7.     border-width: 0 25px 25px 25px;
   
8. 
   
9.     height: 0;
   
10. 
    
11.     width: 50px;
    
12. 
    
13.     position: relative;
    
14. 
    
15.     margin: 20px 0 50px 0;
    
16. 
    
17. }
    
18. 
    
19. #cut-diamond:after {
    
20. 
    
21.     content: "";
    
22. 
    
23.     position: absolute;
    
24. 
    
25.     top: 25px;
    
26. 
    
27.     left: -25px;
    
28. 
    
29.     width: 0;
    
30. 
    
31.     height: 0;
    
32. 
    
33.     border-style: solid;
    
34. 
    
35.     border-color: red transparent transparent transparent;
    
36. 
    
37.     border-width: 70px 50px 0 50px;
    
38. 
    
39. }

复制代码

关键词：HTML5、CSS

【创意无限：纯CSS打造各种形状钻石】相关文章

1. 创意无限：纯CSS打造各种形状钻石

2. 纯 CSS 绘制图形（各种形状的砖石）

3. 由纯CSS打造的Android机器人

4. 谷歌开源Gumbo：纯C语言实现的HTML5解析库

5. CSS 设置鼠标显示形状

6. 盈利模式探讨五：移动社交游戏潜力无限

7. 基于HTML5的无限循环放大场景

8. CSS里的各种水平垂直居中基础写法心得

9. 纯 CSS 绘制各种图形

10. Magic CSS3 – 创建各种神奇的交互动画效果

本文来源：https://www.51html5.com/a1002.html