css样式常见图形效果展示的实例代码

大树

简单写一下常见的基础图形，以及一些遇到的样式小图标 下图是css效果⬇：

 

各个图形的代码如下：

Square(正方形)

1. /*正方形*/
2. .square {
3. width: 60px;
4. height: 60px;
5. background: red;
6. }

复制代码

Circle(圆形)

1. /*圆形*/ /* 可以使用百分比值(大于30%)，但是低版本的Android不支持 */
2. .circle {
3. width: 60px;
4. height: 60px;
5. background: red;
6. -moz-border-radius: 30px;
7. -webkit-border-radius: 30px;
8. border-radius: 30px;
9. }

复制代码

Triangle Up(正三角形)

1. /*正三角*/
2. .triangle-up {
3. width: 0;
4. border: 30px solid red;
5. border-left: 30px solid rgba(0, 0, 0, 0);
6. border-right: 30px solid rgba(0, 0, 0, 0);
7. border-top: 30px solid rgba(0, 0, 0, 0);
8. /*border-bottom: 30px solid rgba(0, 0, 0, 0);*/
9. }

复制代码

Triangle Down(倒三角形)

1. /*倒三角*/
2. .triangle-down {
3. width: 0;
4. border: 30px solid red;
5. border-left: 30px solid rgba(0, 0, 0, 0);
6. border-right: 30px solid rgba(0, 0, 0, 0);
7. /*border-top: 30px solid rgba(0, 0, 0, 0);*/
8. border-bottom: 30px solid rgba(0, 0, 0, 0);
9. }

复制代码

Trapezoid(梯形)

1. /*梯形*/
2. .trapezoid {
3. border-bottom: 60px solid red;
4. border-left: 30px solid transparent;
5. border-right: 30px solid transparent;
6. height: 0;
7. width: 60px;
8. }

复制代码

Parallelogram(平行四边形)

1. /*平行四边形*/
2. .parallelogram {
3. width: 100px;
4. height: 60px;
5. -webkit-transform: skew(20deg);
6. -moz-transform: skew(20deg);
7. -o-transform: skew(20deg);
8. background: red;
9. }

复制代码

Pentagon(五边形)

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

复制代码

Heart(心形)

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

复制代码

Diamond Square(菱形)

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

复制代码

Star (5-points)(五角星)

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

复制代码

Moon(月亮)

1. /*月亮*/
2. .moon {
3. width: 80px;
4. height: 80px;
5. margin: 0 30px 20px 0;
6. border-radius: 50%;
7. box-shadow: 15px 15px 0 0 red;
8. }

复制代码

Cut Diamond(钻石形)

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

复制代码

Egg(鸡蛋)

1. /*鸡蛋型*/
2. .egg {
3. display: block;
4. width: 126px;
5. height: 180px;
6. background-color: red;
7. -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
8. border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
9. }

复制代码

Yin Yang(太极阴阳图形)

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

复制代码

Talk Bubble（聊天框）

1. /*聊天框*/
2. .talkbubble {
3. width: 120px;
4. height: 80px;
5. margin-left: 20px;
6. background: red;
7. position: relative;
8. -moz-border-radius: 10px;
9. -webkit-border-radius: 10px;
10. border-radius: 10px;
11. }

复制代码

Magnifying Glass（放大镜）

1. /*放大镜*/
2. .magnifying-glass {
3. font-size: 10em; /* This controls the size. */
4. display: inline-block;
5. width: 0.4em;
6. height: 0.4em;
7. border: 0.1em solid red;
8. position: relative;
9. border-radius: 0.35em;
10. }
12. .magnifying-glass::before {
13. content: "";
14. display: inline-block;
15. position: absolute;
16. right: -0.25em;
17. bottom: -0.1em;
18. border-width: 0;
19. background: red;
20. width: 0.35em;
21. height: 0.08em;
22. -webkit-transform: rotate(45deg);
23. -moz-transform: rotate(45deg);
24. -ms-transform: rotate(45deg);
25. -o-transform: rotate(45deg);
26. }

复制代码

到此这篇关于css样式常见图形效果展示的文章就介绍到这了,更多相关css样式图形效果展示内容请搜索晓枫资讯以前的文章或继续浏览下面的相关文章，希望大家以后多多支持晓枫资讯！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

焦叶丰

感谢楼主，顶。

Z张先生

顶顶更健康！！！

七月印疵

路过，支持一下