CSS3实现32种基本图形

迈不过友情╰ 2022-07-30 14:56 110阅读 0赞

**      **CSS3可以实现很多漂亮的图形，我收集了32种图形，在下面列出。直接用CSS3画出这些图形，要比贴图性能更好，体验更加，是一种非常好的网页美观方式。

这32种图形分别为圆形，椭圆形，三角形，倒三角形，左三角形，右三角形，菱形，梯形，长方形，正方形，圆环，平行四边形，五角星，六角星，五边形，六边形，八边形，心形，蛋形，无穷符号，消息提示框，钻石，八卦图，食豆人，扇形，月牙，顶左直角三角形，顶右直角三角形 ，底左直角三角形 ，底右直角三角形 ，八角形， 十二角形。  
      网页代码中用到（** <div style="clear:both">**）和Div边距设置和浮动（**margin: 20px 20px; float: left;**）。

参考文章：[http://blog.csdn.net/chenhongwu666/article/details/38905803][http_blog.csdn.net_chenhongwu666_article_details_38905803]

1. 圆形：设置宽度和高度相等，border-radius属性为宽度或高度的一半。

效果图：

![SouthEast][]

**\[css\]**  [view plain][]   [copy][view plain]

[print][view plain] [?][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  \#Circle\{  
2.    **width**:100px;  
3.    **height**:100px;  
4.    **float**: left;  
5.    **background**: \#6fee1d;  
6.    -moz-border-radius: 50px;  
7.    -webkit-border-radius: 50px;  
8.    border-radius: 50px;  
9.  \}

2.椭圆形：圆形的变体，高度设置为宽度的一半，border-radius属性为高度除以高度一半。

效果图：

![SouthEast 1][]

**\[css\]**  [view plain][]   [copy][view plain]

[print][view plain] [?][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  \#Oval \{  
2.     **width**: 200px;  
3.     **height**: 100px;  
4.     **float**: left;  
5.     **background**: \#e9880c;  
6.     -webkit-border-radius: 100px / 50px;  
7.     -moz-border-radius: 100px / 50px;  
8.     border-radius: 100px / 50px;  
9.   \}

3.三角形：宽度和高度设置为0，border设置左，右边透明，底边可见Solid。

效果图：

![SouthEast 2][]

**\[css\]**  [view plain][]   [copy][view plain]

[print][view plain] [?][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  \#Triangle \{  
2.     **width**: 0;  
3.     **height**: 0;  
4.     **float**: left;  
5.     **border-bottom**: 100px solid \#fcf706;  
6.     **border-left**: 50px solid transparent;  
7.     **border-right**: 50px solid transparent;  
8.   \}

4.倒三角形：宽度和高度设置为0，border设置左，右边透明，顶边可见Solid。

效果图：

![SouthEast 3][]

**\[css\]**  [view plain][]   [copy][view plain]

[print][view plain] [?][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  \#InvertedTriangle \{  
2.     **width**: 0;  
3.     **height**: 0;  
4.     **float**: left;  
5.     **border-top**: 100px solid \#30a3bf;  
6.     **border-left**: 50px solid transparent;  
7.     **border-right**: 50px solid transparent;  
8.   \}

5.左三角形：宽度和高度设置为0，border设置上，下边透明，右边可见Solid。

效果图：

![SouthEast 4][]

**\[css\]**  [view plain][]   [copy][view plain]

[print][view plain] [?][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  \#LeftTriangle \{  
2.    **width**: 0;  
3.    **height**: 0;  
4.    **float**: left;  
5.    **border-top**: 50px solid transparent;  
6.    **border-right**: 100px solid \#466f20;  
7.    **border-bottom**: 50px solid transparent;  
8.  \}

6.右三角形：宽度和高度设置为0，border设置上，下边透明，左边可见Solid。

效果图：

![SouthEast 5][]

**\[css\]**  [view plain][]   [copy][view plain]

[print][view plain] [?][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  \#RightTriangle \{  
2.     **width**: 0;  
3.     **height**: 0;  
4.     **float**: left;  
5.     **border-top**: 50px solid transparent;  
6.     **border-left**: 100px solid \#800820;  
7.     **border-bottom**: 50px solid transparent;  
8.   \}

7.菱形：使用transform和rotate相结合，使两个正反三角形上下显示。

效果图：

![SouthEast 6][]

**\[css\]**  [view plain][]   [copy][view plain]

[print][view plain] [?][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  \#Diamond \{  
2.    **width**: 100px;  
3.    **height**: 100px;  
4.    **float**: left;  
5.    **background**: \#8e00ff;  
6.    /\* Rotate \*/  
7.    -webkit-transform: rotate(\-45deg);  
8.    -moz-transform: rotate(\-45deg);  
9.    -ms-transform: rotate(\-45deg);  
10.   -o-transform: rotate(\-45deg);  
11.   transform: rotate(\-45deg);  
12.   /\* Rotate Origin \*/  
13.   -webkit-transform-origin: 0 100%;  
14.   -moz-transform-origin: 0 100%;  
15.   -ms-transform-origin: 0 100%;  
16.   -o-transform-origin: 0 100%;  
17.   transform-origin: 0 100%;  
18.   **margin**: 40px 0 10px 240px;  
19.  \}

8.梯形：三角形的变体，设置左右两条边相等，并且给它设置一个宽度。

效果图：

![SouthEast 7][]

**\[css\]**  [view plain][]   [copy][view plain]

[print][view plain] [?][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  \#Trapezium \{  
2.   **height**: 0;  
3.   **width**: 100px;  
4.   **float**: left;  
5.   **border-bottom**: 100px solid \#dc2500;  
6.   **border-left**: 50px solid transparent;  
7.   **border-right**: 50px solid transparent;  
8.  \}

9.长方形：宽比高长。

效果图：

![SouthEast 8][]

**\[css\]**  [view plain][]   [copy][view plain]

[print][view plain] [?][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  \#Rectangle \{  
2.   **height**: 50px;  
3.   **width**: 100px;  
4.   **float**: left;  
5.   **background**: \#afe05d;  
6.  \}

10.正方形：宽和高相等。

效果图：

![SouthEast 9][]

**\[css\]**  [view plain][]   [copy][view plain]

[print][view plain] [?][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  \#Square \{  
2.   **height**: 100px;  
3.   **width**: 100px;  
4.   **float**: left;  
5.   **background**: \#b02089;  
6.  \}

11.圆环：在圆形的基础上设置边界，边界颜色与圆形填充颜色不同。

效果图：

![SouthEast 10][]

**\[css\]**  [view plain][]   [copy][view plain]

[print][view plain] [?][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  \#Ring \{  
2.   **width**: 100px;  
3.   **height**: 100px;  
4.   **float**: left;  
5.   **background-color**: white;  
6.   border-radius: 80px;  
7.   **border**:5px \#ffd700 solid;  
8.  \}

12.平行四边形：使用transform使长方形倾斜一个角度。

效果图：

![SouthEast 11][]

**\[css\]**  [view plain][]   [copy][view plain]

[print][view plain] [?][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  \#Parallelogram \{  
2.   **width**: 120px;  
3.   **height**: 80px;  
4.   **float**: left;  
5.   **margin-left**: 10px;  
6.   -webkit-transform: skew(30deg);  
7.   -moz-transform: skew(230deg);  
8.   -o-transform: skew(30deg);  
9.   transform: skew(30deg);  
10.  **background-color**: \#2eda01;  
11. \}

13.五角星：星形的实现方式比较复杂，主要是使用transform属性来旋转不同的边。

效果图：

![SouthEast 12][]

**\[css\]**  [view plain][]   [copy][view plain]

[print][view plain] [?][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

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

14.六角星：使用transform属性来旋转不同的边。

效果图：

![SouthEast 13][]

**\[css\]**  [view plain][]   [copy][view plain]

[print][view plain] [?][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  \#SixStar\{  
2.    **width**: 0;  
3.    **height**: 0;  
4.    **float**: left;  
5.    **border-left**: 50px solid transparent;  
6.    **border-right**: 50px solid transparent;  
7.    **border-bottom**: 100px solid \#cfd810;  
8.    **position**: relative;  
9.   \}  
10.  \#SixStar:after\{  
11.   **width**: 0;  
12.   **height**: 0;  
13.   **content**: "";  
14.   **border-top**: 100px solid \#cfd810;  
15.   **border-left**: 50px solid transparent;  
16.   **border-right**: 50px solid transparent;  
17.   **position**: absolute;  
18.   top: 30px;  
19.   left: \-50px;  
20.  \}

15.六边形：在长方形上面和下面各放置一个三角形。

效果图：

![SouthEast 14][]

**\[css\]**  [view plain][]   [copy][view plain]

[print][view plain] [?][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

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

16.五边形：可以采用三角形和梯形组合。

效果图：

![SouthEast 15][]

**\[css\]**  [view plain][]   [copy][view plain]

[print][view plain] [?][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  \#Pentagon\{  
2.    **width**: 60px;  
3.    **float**: left;  
4.    **position**: relative;  
5.    **border-width**: 52px 20px 0;  
6.    **border-style**: solid;  
7.    **border-color**: \#711ee2 transparent;  
8.  \}  
9.  \#Pentagon:before\{  
10.   **content**: "";  
11.   **position**: absolute;  
12.   **width**: 0;  
13.   **height**: 0;  
14.   top: \-92px;  
15.   left: \-20px;  
16.   **border-width**: 0 50px 40px;  
17.   **border-style**: solid;  
18.   **border-color**: transparent transparent \#711ee2;  
19. \}

17.八边形：在长方形上面和下面各放置一个梯形。

效果图：

![SouthEast 16][]

**\[css\]**  [view plain][]   [copy][view plain]

[print][view plain] [?][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

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

18.心形：心形的制作是非常复杂的，可以使用伪元素来制作，分别将伪元素旋转不同的角度，并修改transform-origin属性来设置元素的旋转中心点。

效果图：

![SouthEast 17][]

**\[css\]**  [view plain][]   [copy][view plain]

[print][view plain] [?][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

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

19.蛋形：椭圆形的变体，高度比宽度稍大，设置正确的border-radius属性。

效果图：

![SouthEast 18][]

**\[css\]**  [view plain][]   [copy][view plain]

[print][view plain] [?][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  \#Egg \{  
2.    **width**: 100px;  
3.    **height**: 160px;  
4.    **float**: left;  
5.    **background**: \#ffb028;  
6.    **display**: block;  
7.    -webkit-border-radius: 60px 60px 60px 60px / 100px 100px 68px 68px;  
8.    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;  
9.   \}

20.无穷符号：通过border属性和设置伪元素的角度来实现。

效果图：

![SouthEast 19][]

**\[css\]**  [view plain][]   [copy][view plain]

[print][view plain] [?][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  \#Infinity \{  
2.    **width**: 220px;  
3.    **height**: 100px;  
4.    **float**: left;  
5.    **position**: relative;  
6.   \}  
7.   \#Infinity:before, \#Infinity:after \{  
8.    **content**: "";  
9.    **width**: 60px;  
10.   **height**: 60px;  
11.   **position**: absolute;  
12.   top: 0;  
13.   left: 0;  
14.   **border**: 20px solid \#008bb0;  
15.   -moz-border-radius: 50px 50px 0;  
16.   border-radius: 50px 50px 0 50px;  
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.  \}  
23.  \#Infinity:after \{  
24.   left: auto;  
25.   right: 0;  
26.   -moz-border-radius: 50px 50px 50px 0;  
27.   border-radius: 50px 50px 50px 0;  
28.   -webkit-transform: rotate(45deg);  
29.   -moz-transform: rotate(45deg);  
30.   -ms-transform: rotate(45deg);  
31.   -o-transform: rotate(45deg);  
32.   transform: rotate(45deg);  
33.  \}

21.消息提示框：一个圆角矩形加左边中间的一个小三角形。

效果图：

![SouthEast 20][]

**\[css\]**  [view plain][]   [copy][view plain]

[print][view plain] [?][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  \#CommentBubble \{  
2.     **width**: 140px;  
3.     **height**: 100px;  
4.     **margin**: 30px 20px;  
5.     **float**: left;  
6.     **background**: \#8867b9;  
7.     **position**: relative;  
8.     -moz-border-radius: 12px;  
9.     -webkit-border-radius: 12px;  
10.    border-radius: 12px;  
11.  \}  
12.  \#CommentBubble:before \{  
13.    **content**: "";  
14.    **width**: 0;  
15.    **height**: 0;  
16.    right: 100%;  
17.    top: 38px;  
18.    **position**: absolute;  
19.    **border-top**: 13px solid transparent;  
20.    **border-right**: 26px solid \#8867b9;  
21.    **border-bottom**: 13px solid transparent;  
22.  \}

22.钻石：上面一个梯形，下面一个三角形组成。

效果图：

![SouthEast 21][]

**\[css\]**  [view plain][]   [copy][view plain]

[print][view plain] [?][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  \#Diamonds\{  
2.    **width**: 50px;  
3.    **height**: 0;  
4.    **float**: left;  
5.    **border-style**: solid;  
6.    **border-color**: transparent transparent \#9aff02 transparent;  
7.    **border-width**: 0 25px 25px 25px;  
8.    **position**: relative;  
9.    **margin**: 20px 0 50px 0;  
10. \}  
11. \#Diamonds:after\{  
12.   **width**: 0;  
13.   **height**: 0;  
14.   top: 25px;  
15.   left: \-25px;  
16.   **border-style**: solid;  
17.   **border-color**: \#9aff02 transparent transparent transparent;  
18.   **border-width**: 70px 50px 0 50px;  
19.   **position**: absolute;  
20.   **content**: "";  
21.  \}

23.八卦图：多个圆形的组合。

效果图：

![SouthEast 22][]

**\[css\]**  [view plain][]   [copy][view plain]

[print][view plain] [?][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  \#EightDiagrams\{  
2.    **width**: 96px;  
3.    **height**: 48px;  
4.    **margin**: 20px 20px;  
5.    **float**: left;  
6.    **background-color**: \#ffffff;  
7.    **border-color**: \#000000;  
8.    **border-style**: solid;  
9.    **border-width**: 2px 2px 50px 2px;  
10.   border-radius: 100%;  
11.   **position**: relative;  
12.  \}  
13.  \#EightDiagrams:before \{  
14.   **width**: 12px;  
15.   **height**: 12px;  
16.   top: 50%;  
17.   left: 0;  
18.   **content**: "";  
19.   **position**: absolute;  
20.   **background-color**: \#ffffff;  
21.   **border**: 18px solid \#000000;  
22.   border-radius: 100%;  
23.  \}  
24.  \#EightDiagrams:after \{  
25.   **width**: 12px;  
26.   **height**: 12px;  
27.   top: 50%;  
28.   left: 50%;  
29.   **background-color**: \#000000;  
30.   **border**: 18px solid \#ffffff;  
31.   border-radius:100%;  
32.   **content**: "";  
33.   **position**: absolute;  
34.  \}

24.食豆人：设置border和border-top-left-radius，border-bottom-right-radius等属性。

效果图：

![SouthEast 23][]

**\[css\]**  [view plain][]   [copy][view plain]

[print][view plain] [?][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  \#PacMan \{  
2.   **width**: 0;  
3.   **height**: 0;  
4.   **float**: left;  
5.   **border-right**: 60px solid transparent;  
6.   **border-left**: 60px solid \#300fed;  
7.   **border-top**: 60px solid \#300fed;  
8.   **border-bottom**: 60px solid \#300fed;  
9.   border-top-left-radius: 60px;  
10.  border-top-right-radius: 60px;  
11.  border-bottom-left-radius: 60px;  
12.  border-bottom-right-radius: 60px;  
13. \}

25.扇形：在三角形的基础上，让其中一边成弧形 。

效果图：

![SouthEast 24][]

**\[css\]**  [view plain][]   [copy][view plain]

[print][view plain] [?][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  \#Sector \{  
2.     **width**:0;  
3.     **height**:0;  
4.     **float**: left;  
5.     **background-color**: \#ffffff;  
6.     **border-left**: 70px solid transparent;  
7.     **border-right**: 70px solid transparent;  
8.     **border-top**: 100px solid \#ab9ed1;  
9.     border-radius:50%;  
10.  \}

26.月牙：由两条弧线组成的，每个弧线可以看成一个圆的一部分弧长，在圆的基础上让圆有一个阴影可以形成一个月牙。

效果图：

![SouthEast 25][]

**\[css\]**  [view plain][]   [copy][view plain]

[print][view plain] [?][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  \#CrescentMoon\{  
2.     **width**:80px;  
3.     **height**:80px;  
4.     **float**: left;  
5.     **background-color**: \#ffffff;  
6.     border-radius:50%;  
7.     box-shadow: 15px 15px 0 0 \#9600d2;  
8.   \}

27.顶左直角三角形。

效果图：

![SouthEast 26][]

**\[css\]**  [view plain][]   [copy][view plain]

[print][view plain] [?][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  \#TopLeftTriangle \{  
2.     **width**: 0px;  
3.     **height**: 0px;  
4.     **margin**: 10px 10px;  
5.     **float**: left;  
6.     **border-top**: 100px solid \#7efde1;  
7.     **border-right**: 100px solid transparent;  
8.   \}

28.顶右直角三角形。

效果图：

![SouthEast 27][]

**\[css\]**  [view plain][]   [copy][view plain]

[print][view plain] [?][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  \#TopRightTriangle \{  
2.    **width**: 0px;  
3.    **height**: 0px;  
4.    **margin**: 10px 10px;  
5.    **float**: left;  
6.    **border-top**: 100px solid \#400526;  
7.    **border-left**: 100px solid transparent;  
8.  \}

29.底左直角三角形。

效果图：

![SouthEast 28][]

**\[css\]**  [view plain][]   [copy][view plain]

[print][view plain] [?][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  \#BottomLeftTriangle \{  
2.    **width**: 0px;  
3.    **height**: 0px;  
4.    **margin**: 10px 10px;  
5.    **float**: left;  
6.    **border-bottom**: 100px solid \#600ffe;  
7.    **border-right**: 100px solid transparent;  
8.   \}

30.底右直角三角形。

效果图：

![SouthEast 29][]

**\[css\]**  [view plain][]   [copy][view plain]

[print][view plain] [?][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  \#BottomRightTriangle \{  
2.    **width**: 0px;  
3.    **height**: 0px;  
4.    **margin**: 10px 10px;  
5.    **float**: left;  
6.    **border-bottom**: 100px solid \#ff7578;  
7.    **border-left**: 100px solid transparent;  
8.   \}

31.八角形。

效果图：

![SouthEast 30][]

**\[css\]**  [view plain][]   [copy][view plain]

[print][view plain] [?][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  \#Burst8 \{  
2.   **width**: 80px;  
3.   **height**: 80px;  
4.   **margin**: 10px 10px;  
5.   **float**: left;  
6.   **background-color**: \#cf7668;  
7.   **position**: relative;  
8.   transform:rotate(20deg);  
9.   -webkit-transform:rotate(20deg);  
10.  -ms-transform:rotate(20deg);  
11.  -moz-transform:rotate(20deg);  
12.  -o-transform:rotate(20deg);  
13. \}  
14. \#Burst8:before\{  
15.  **width**: 80px;  
16.  **height**: 80px;  
17.  top: 0;  
18.  left: 0;  
19.  **background-color**: \#cf7668;  
20.  **position**: absolute;  
21.  **content**: "";  
22.  transform:rotate(135deg);  
23.  -webkit-transform:rotate(135deg);  
24.  -ms-transform:rotate(135deg);  
25.  -moz-transform:rotate(135deg);  
26.  -o-transform:rotate(135deg);  
27. \}

32.十二角形。

效果图：

![SouthEast 31][]

**\[css\]**  [view plain][]   [copy][view plain]

[print][view plain] [?][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  \#Burst12 \{  
2.     **width**: 80px;  
3.     **height**: 80px;  
4.     **margin**: 20px 20px;  
5.     **float**: left;  
6.     **background-color**: \#a8ff26;  
7.     **position**: relative;  
8.     **text-align**: center;  
9.   \}  
10.  \#Burst12:before, \#Burst12:after\{  
11.    **width**: 80px;  
12.    **height**: 80px;  
13.    top: 0;  
14.    left: 0;  
15.    **background-color**: \#a8ff26;  
16.    **position**: absolute;  
17.    **content**: "";  
18.  \}  
19.  \#Burst12:before\{  
20.    transform:rotate(30deg);  
21.    -webkit-transform:rotate(30deg);  
22.    -ms-transform:rotate(30deg);  
23.    -moz-transform:rotate(30deg);  
24.    -o-transform:rotate(30deg);  
25.  \}  
26.  \#Burst12:after\{  
27.    transform:rotate(60deg);  
28.    -webkit-transform:rotate(60deg);  
29.    -ms-transform:rotate(60deg);  
30.    -moz-transform:rotate(60deg);  
31.    -o-transform:rotate(60deg);  
32.  \}

完整的CSS3+HTML5代码：BaseGraphCSS3.html

效果图：

![SouthEast 32][]

**\[html\]**  [view plain][]   [copy][view plain]

[print][view plain] [?][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  <!DOCTYPE html**>**  
2.  **<****html****>**  
3.  **<****head****>**  
4.    **<****meta** charset="UTF-8"**>**  
5.    **<****title****>**CSS3实现基本图形**</****title****>**  
6.    **<****style****>**  
7.     \#Circle\{  
8.       width:100px;  
9.       height:100px;  
10.      float: left;  
11.      background: \#6fee1d;  
12.      -moz-border-radius: 50px;  
13.      -webkit-border-radius: 50px;  
14.      border-radius: 50px;  
15.    \}  
16.    \#Oval \{  
17.      width: 200px;  
18.      height: 100px;  
19.      float: left;  
20.      background: \#e9880c;  
21.      -webkit-border-radius: 100px / 50px;  
22.      -moz-border-radius: 100px / 50px;  
23.      border-radius: 100px / 50px;  
24.    \}  
25.    \#Triangle \{  
26.      width: 0;  
27.      height: 0;  
28.      float: left;  
29.      border-bottom: 100px solid \#fcf706;  
30.      border-left: 50px solid transparent;  
31.      border-right: 50px solid transparent;  
32.    \}  
33.    \#InvertedTriangle \{  
34.      width: 0;  
35.      height: 0;  
36.      float: left;  
37.      border-top: 100px solid \#30a3bf;  
38.      border-left: 50px solid transparent;  
39.      border-right: 50px solid transparent;  
40.    \}  
41.    \#LeftTriangle \{  
42.      width: 0;  
43.      height: 0;  
44.      float: left;  
45.      border-top: 50px solid transparent;  
46.      border-right: 100px solid \#466f20;  
47.      border-bottom: 50px solid transparent;  
48.    \}  
49.    \#RightTriangle \{  
50.      width: 0;  
51.      height: 0;  
52.      float: left;  
53.      border-top: 50px solid transparent;  
54.      border-left: 100px solid \#800820;  
55.      border-bottom: 50px solid transparent;  
56.    \}  
57.    \#Diamond \{  
58.     width: 100px;  
59.     height: 100px;  
60.     float: left;  
61.     background: \#8e00ff;  
62.     /\* Rotate \*/  
63.     -webkit-transform: rotate(-45deg);  
64.     -moz-transform: rotate(-45deg);  
65.     -ms-transform: rotate(-45deg);  
66.     -o-transform: rotate(-45deg);  
67.     transform: rotate(-45deg);  
68.     /\* Rotate Origin \*/  
69.     -webkit-transform-origin: 0 100%;  
70.     -moz-transform-origin: 0 100%;  
71.     -ms-transform-origin: 0 100%;  
72.     -o-transform-origin: 0 100%;  
73.     transform-origin: 0 100%;  
74.     margin: 40px 0 10px 240px;  
75.    \}  
76.    \#Trapezium \{  
77.     height: 0;  
78.     width: 100px;  
79.     float: left;  
80.     border-bottom: 100px solid \#dc2500;  
81.     border-left: 50px solid transparent;  
82.     border-right: 50px solid transparent;  
83.    \}  
84.    \#Rectangle \{  
85.     height: 50px;  
86.     width: 100px;  
87.     float: left;  
88.     background: \#afe05d;  
89.    \}  
90.    \#Square \{  
91.     height: 100px;  
92.     width: 100px;  
93.     float: left;  
94.     background: \#b02089;  
95.    \}  
96.    \#Ring \{  
97.     width: 100px;  
98.     height: 100px;  
99.     float: left;  
100.     background-color: white;  
101.     border-radius: 80px;  
102.     border:5px \#ffd700 solid;  
103.    \}  
104.    \#Parallelogram \{  
105.     width: 120px;  
106.     height: 80px;  
107.     float: left;  
108.     margin-left: 10px;  
109.     -webkit-transform: skew(30deg);  
110.     -moz-transform: skew(230deg);  
111.     -o-transform: skew(30deg);  
112.     transform: skew(30deg);  
113.     background-color: \#2eda01;  
114.    \}  
115.   
116.    \#FiveStar \{  
117.      width: 0;  
118.      height: 0;  
119.      float: left;  
120.      margin: 20px 20px;  
121.      color: \#ff0012;  
122.      position: relative;  
123.      display: block;  
124.      border-right: 80px solid transparent;  
125.      border-bottom: 60px solid \#ff0012;  
126.      border-left: 80px solid transparent;  
127.      -moz-transform: rotate(35deg);  
128.      -webkit-transform: rotate(35deg);  
129.      -ms-transform: rotate(35deg);  
130.      -o-transform: rotate(35deg);  
131.    \}  
132.    \#FiveStar:before \{  
133.      height: 0;  
134.      width: 0;  
135.      content: '';  
136.      position: absolute;  
137.      display: block;  
138.      top: -35px;  
139.      left: -50px;  
140.      border-bottom: 60px solid \#ff0012;  
141.      border-left: 20px solid transparent;  
142.      border-right: 20px solid transparent;  
143.      -webkit-transform: rotate(-35deg);  
144.      -moz-transform: rotate(-35deg);  
145.      -ms-transform: rotate(-35deg);  
146.      -o-transform: rotate(-35deg);  
147.    \}  
148.    \#FiveStar:after \{  
149.      width: 0;  
150.      height: 0;  
151.      content: '';  
152.      position: absolute;  
153.      display: block;  
154.      top: 3px;  
155.      left: -85px;  
156.      color: \#ff0012;  
157.      border-right: 80px solid transparent;  
158.      border-bottom: 60px solid \#ff0012;  
159.      border-left: 80px solid transparent;  
160.      -webkit-transform: rotate(-70deg);  
161.      -moz-transform: rotate(-70deg);  
162.      -ms-transform: rotate(-70deg);  
163.      -o-transform: rotate(-70deg);  
164.    \}  
165.   
166.    \#SixStar\{  
167.      width: 0;  
168.      height: 0;  
169.      float: left;  
170.      border-left: 50px solid transparent;  
171.      border-right: 50px solid transparent;  
172.      border-bottom: 100px solid \#cfd810;  
173.      position: relative;  
174.     \}  
175.     \#SixStar:after\{  
176.      width: 0;  
177.      height: 0;  
178.      content: "";  
179.      border-top: 100px solid \#cfd810;  
180.      border-left: 50px solid transparent;  
181.      border-right: 50px solid transparent;  
182.      position: absolute;  
183.      top: 30px;  
184.      left: -50px;  
185.     \}  
186.   
187.     \#Pentagon\{  
188.       width: 60px;  
189.       float: left;  
190.       position: relative;  
191.       border-width: 52px 20px 0;  
192.       border-style: solid;  
193.       border-color: \#711ee2 transparent;  
194.     \}  
195.     \#Pentagon:before\{  
196.       content: "";  
197.       position: absolute;  
198.       width: 0;  
199.       height: 0;  
200.       top: -92px;  
201.       left: -20px;  
202.       border-width: 0 50px 40px;  
203.       border-style: solid;  
204.       border-color: transparent transparent \#711ee2;  
205.     \}  
206.   
207.     \#Hexagon \{  
208.       width: 100px;  
209.       height: 55px;  
210.       float: left;  
211.       background: \#000001;  
212.       position: relative;  
213.       margin: 10px auto;  
214.     \}  
215.     \#Hexagon:before \{  
216.       content: "";  
217.       width: 0;  
218.       height: 0;  
219.       position: absolute;  
220.       top: -25px;  
221.       left: 0;  
222.       border-left: 50px solid transparent;  
223.       border-right: 50px solid transparent;  
224.       border-bottom: 25px solid \#000001;  
225.    \}  
226.    \#Hexagon:after \{  
227.      content: "";  
228.      width: 0;  
229.      height: 0;  
230.      position: absolute;  
231.      bottom: -25px;  
232.      left: 0;  
233.      border-left: 50px solid transparent;  
234.      border-right: 50px solid transparent;  
235.      border-top: 25px solid \#000001;  
236.    \}  
237.   
238.    \#Octagon\{  
239.     width: 100px;  
240.     height: 100px;  
241.     float: left;  
242.     margin: 10px 10px;  
243.     background-color: \#66e006;  
244.     position: relative;  
245.    \}  
246.    \#Octagon:before\{  
247.     width: 42px;  
248.     height: 0;  
249.     top: 0;  
250.     left: 0;  
251.     position: absolute;  
252.     content: "";  
253.     border-left: 29px solid \#ffffff;  
254.     border-right: 29px solid \#ffffff;  
255.     border-bottom: 29px solid \#66e006;  
256.    \}  
257.    \#Octagon:after\{  
258.     width: 42px;  
259.     height: 0;  
260.     left: 0;  
261.     bottom: 0;  
262.     position: absolute;  
263.     content: "";  
264.     border-left: 29px solid \#ffffff;  
265.     border-right: 29px solid \#ffffff;  
266.     border-top: 29px solid \#66e006;  
267.    \}  
268.   
269.    \#Heart \{  
270.     float: left;  
271.     position: relative;  
272.    \}  
273.    \#Heart:before, \#Heart:after \{  
274.     content: "";  
275.     width: 70px;  
276.     height: 115px;  
277.     position: absolute;  
278.     background: red;  
279.     left: 70px;  
280.     top: 0;  
281.     -webkit-border-radius: 50px 50px 0 0;  
282.     -moz-border-radius: 50px 50px 0 0;  
283.     border-radius: 50px 50px 0 0;  
284.     -webkit-transform: rotate(-45deg);  
285.     -moz-transform: rotate(-45deg);  
286.     -ms-transform: rotate(-45deg);  
287.     -o-transform: rotate(-45deg);  
288.     transform: rotate(-45deg);  
289.     -webkit-transform-origin: 0 100%;  
290.     -moz-transform-origin: 0 100%;  
291.     -ms-transform-origin: 0 100%;  
292.     -o-transform-origin: 0 100%;  
293.     transform-origin: 0 100%;  
294.   \}  
295.   \#Heart:after \{  
296.     left: 0;  
297.     -webkit-transform: rotate(45deg);  
298.     -moz-transform: rotate(45deg);  
299.     -ms-transform: rotate(45deg);  
300.     -o-transform: rotate(45deg);  
301.     transform: rotate(45deg);  
302.     -webkit-transform-origin: 100% 100%;  
303.     -moz-transform-origin: 100% 100%;  
304.     -ms-transform-origin: 100% 100%;  
305.     -o-transform-origin: 100% 100%;  
306.     transform-origin: 100% 100%;  
307.    \}  
308.   
309.    \#Egg \{  
310.     width: 100px;  
311.     height: 160px;  
312.     float: left;  
313.     background: \#ffb028;  
314.     display: block;  
315.     -webkit-border-radius: 60px 60px 60px 60px / 100px 100px 68px 68px;  
316.     border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;  
317.    \}  
318.   
319.    \#Infinity \{  
320.     width: 220px;  
321.     height: 100px;  
322.     float: left;  
323.     position: relative;  
324.    \}  
325.    \#Infinity:before, \#Infinity:after \{  
326.     content: "";  
327.     width: 60px;  
328.     height: 60px;  
329.     position: absolute;  
330.     top: 0;  
331.     left: 0;  
332.     border: 20px solid \#008bb0;  
333.     -moz-border-radius: 50px 50px 0;  
334.     border-radius: 50px 50px 0 50px;  
335.     -webkit-transform: rotate(-45deg);  
336.     -moz-transform: rotate(-45deg);  
337.     -ms-transform: rotate(-45deg);  
338.     -o-transform: rotate(-45deg);  
339.     transform: rotate(-45deg);  
340.    \}  
341.    \#Infinity:after \{  
342.     left: auto;  
343.     right: 0;  
344.     -moz-border-radius: 50px 50px 50px 0;  
345.     border-radius: 50px 50px 50px 0;  
346.     -webkit-transform: rotate(45deg);  
347.     -moz-transform: rotate(45deg);  
348.     -ms-transform: rotate(45deg);  
349.     -o-transform: rotate(45deg);  
350.     transform: rotate(45deg);  
351.    \}  
352.   
353.    \#CommentBubble \{  
354.      width: 140px;  
355.      height: 100px;  
356.      margin: 30px 20px;  
357.      float: left;  
358.      background: \#8867b9;  
359.      position: relative;  
360.      -moz-border-radius: 12px;  
361.      -webkit-border-radius: 12px;  
362.      border-radius: 12px;  
363.    \}  
364.    \#CommentBubble:before \{  
365.      content: "";  
366.      width: 0;  
367.      height: 0;  
368.      right: 100%;  
369.      top: 38px;  
370.      position: absolute;  
371.      border-top: 13px solid transparent;  
372.      border-right: 26px solid \#8867b9;  
373.      border-bottom: 13px solid transparent;  
374.    \}  
375.   
376.    \#Diamonds\{  
377.      width: 50px;  
378.      height: 0;  
379.      float: left;  
380.      border-style: solid;  
381.      border-color: transparent transparent \#9aff02 transparent;  
382.      border-width: 0 25px 25px 25px;  
383.      position: relative;  
384.      margin: 20px 0 50px 0;  
385.    \}  
386.    \#Diamonds:after\{  
387.      width: 0;  
388.      height: 0;  
389.      top: 25px;  
390.      left: -25px;  
391.      border-style: solid;  
392.      border-color: \#9aff02 transparent transparent transparent;  
393.      border-width: 70px 50px 0 50px;  
394.      position: absolute;  
395.      content: "";  
396.     \}  
397.   
398.     \#EightDiagrams\{  
399.      width: 96px;  
400.      height: 48px;  
401.      margin: 20px 20px;  
402.      float: left;  
403.      background-color: \#ffffff;  
404.      border-color: \#000000;  
405.      border-style: solid;  
406.      border-width: 2px 2px 50px 2px;  
407.      border-radius: 100%;  
408.      position: relative;  
409.     \}  
410.     \#EightDiagrams:before \{  
411.      width: 12px;  
412.      height: 12px;  
413.      top: 50%;  
414.      left: 0;  
415.      content: "";  
416.      position: absolute;  
417.      background-color: \#ffffff;  
418.      border: 18px solid \#000000;  
419.      border-radius: 100%;  
420.     \}  
421.     \#EightDiagrams:after \{  
422.      width: 12px;  
423.      height: 12px;  
424.      top: 50%;  
425.      left: 50%;  
426.      background-color: \#000000;  
427.      border: 18px solid \#ffffff;  
428.      border-radius:100%;  
429.      content: "";  
430.      position: absolute;  
431.     \}  
432.   
433.     \#PacMan \{  
434.      width: 0;  
435.      height: 0;  
436.      float: left;  
437.      border-right: 60px solid transparent;  
438.      border-left: 60px solid \#300fed;  
439.      border-top: 60px solid \#300fed;  
440.      border-bottom: 60px solid \#300fed;  
441.      border-top-left-radius: 60px;  
442.      border-top-right-radius: 60px;  
443.      border-bottom-left-radius: 60px;  
444.      border-bottom-right-radius: 60px;  
445.     \}  
446.   
447.     \#Sector \{  
448.       width:0;  
449.       height:0;  
450.       float: left;  
451.       background-color: \#ffffff;  
452.       border-left: 70px solid transparent;  
453.       border-right: 70px solid transparent;  
454.       border-top: 100px solid \#ab9ed1;  
455.       border-radius:50%;  
456.     \}  
457.   
458.     \#CrescentMoon\{  
459.       width:80px;  
460.       height:80px;  
461.       float: left;  
462.       background-color: \#ffffff;  
463.       border-radius:50%;  
464.       box-shadow: 15px 15px 0 0 \#9600d2;  
465.     \}  
466.   
467.     \#TopLeftTriangle \{  
468.       width: 0px;  
469.       height: 0px;  
470.       margin: 10px 10px;  
471.       float: left;  
472.       border-top: 100px solid \#7efde1;  
473.       border-right: 100px solid transparent;  
474.     \}  
475.     \#TopRightTriangle \{  
476.       width: 0px;  
477.       height: 0px;  
478.       margin: 10px 10px;  
479.       float: left;  
480.       border-top: 100px solid \#400526;  
481.       border-left: 100px solid transparent;  
482.     \}  
483.     \#BottomLeftTriangle \{  
484.      width: 0px;  
485.      height: 0px;  
486.      margin: 10px 10px;  
487.      float: left;  
488.      border-bottom: 100px solid \#600ffe;  
489.      border-right: 100px solid transparent;  
490.     \}  
491.     \#BottomRightTriangle \{  
492.      width: 0px;  
493.      height: 0px;  
494.      margin: 10px 10px;  
495.      float: left;  
496.      border-bottom: 100px solid \#ff7578;  
497.      border-left: 100px solid transparent;  
498.     \}  
499.   
500.     \#Burst8 \{  
501.      width: 80px;  
502.      height: 80px;  
503.      margin: 10px 10px;  
504.      float: left;  
505.      background-color: \#cf7668;  
506.      position: relative;  
507.      transform:rotate(20deg);  
508.      -webkit-transform:rotate(20deg);  
509.      -ms-transform:rotate(20deg);  
510.      -moz-transform:rotate(20deg);  
511.      -o-transform:rotate(20deg);  
512.     \}  
513.     \#Burst8:before\{  
514.      width: 80px;  
515.      height: 80px;  
516.      top: 0;  
517.      left: 0;  
518.      background-color: \#cf7668;  
519.      position: absolute;  
520.      content: "";  
521.      transform:rotate(135deg);  
522.      -webkit-transform:rotate(135deg);  
523.      -ms-transform:rotate(135deg);  
524.      -moz-transform:rotate(135deg);  
525.      -o-transform:rotate(135deg);  
526.     \}  
527.   
528.     \#Burst12 \{  
529.       width: 80px;  
530.       height: 80px;  
531.       margin: 20px 20px;  
532.       float: left;  
533.       background-color: \#a8ff26;  
534.       position: relative;  
535.       text-align: center;  
536.     \}  
537.     \#Burst12:before, \#Burst12:after\{  
538.       width: 80px;  
539.       height: 80px;  
540.       top: 0;  
541.       left: 0;  
542.       background-color: \#a8ff26;  
543.       position: absolute;  
544.       content: "";  
545.     \}  
546.     \#Burst12:before\{  
547.       transform:rotate(30deg);  
548.       -webkit-transform:rotate(30deg);  
549.       -ms-transform:rotate(30deg);  
550.       -moz-transform:rotate(30deg);  
551.       -o-transform:rotate(30deg);  
552.     \}  
553.     \#Burst12:after\{  
554.       transform:rotate(60deg);  
555.       -webkit-transform:rotate(60deg);  
556.       -ms-transform:rotate(60deg);  
557.       -moz-transform:rotate(60deg);  
558.       -o-transform:rotate(60deg);  
559.     \}  
560.   **</****style****>**  
561. **</****head****>**  
562. **<****body****>**  
563.     
564.   **<****div** id="Circle"**>****</****div****>**  
565.     
566.   **<****div** id="Oval"**>****</****div****>**  
567.     
568.   **<****div** id="Triangle"**>****</****div****>**  
569.     
570.   **<****div** id="InvertedTriangle"**>****</****div****>**  
571.     
572.   **<****div** id="LeftTriangle"**>****</****div****>**  
573.     
574.   **<****div** id="RightTriangle"**>****</****div****>**  
575.     
576.   **<****div** id="Diamond"**>****</****div****>**  
577.     
578.   **<****div** id="Trapezium"**>****</****div****>**  
579.     
580.   **<****div** id="Rectangle"**>****</****div****>**  
581.   
582.     
583.   **<****div** style="clear:both"**>**  
584.     
585.   **<****div** id="Square"**>****</****div****>**  
586.     
587.   **<****div** id="Ring"**>****</****div****>**  
588.     
589.   **<****div** id="Parallelogram"**>****</****div****>**  
590.     
591.   **<****div** id="FiveStar"**>****</****div****>**  
592.     
593.   **<****div** id="SixStar"**>****</****div****>**  
594.     
595.   **<****div** id="Pentagon"**>****</****div****>**  
596.     
597.   **<****div** id="Hexagon"**>****</****div****>**  
598.     
599.   **<****div** id="Octagon"**>****</****div****>**  
600.     
601.   **<****div** id="Heart"**>****</****div****>**  
602.   
603.     
604.   **<****div** style="clear:both"**>**  
605.     
606.   **<****div** id="Egg"**>****</****div****>**  
607.     
608.   **<****div** id="Infinity"**>****</****div****>**  
609.     
610.   **<****div** id="CommentBubble"**>****</****div****>**  
611.     
612.   **<****div** id="Diamonds"**>****</****div****>**  
613.     
614.   **<****div** id="EightDiagrams"**>****</****div****>**  
615.     
616.   **<****div** id="PacMan"**>****</****div****>**  
617.     
618.   **<****div** id="Sector"**>****</****div****>**  
619.     
620.   **<****div** id="CrescentMoon"**>****</****div****>**  
621.   
622.     
623.   **<****div** style="clear:both"**>**  
624.     
625.   **<****div** id="TopLeftTriangle"**>****</****div****>**  
626.     
627.   **<****div** id="TopRightTriangle"**>****</****div****>**  
628.     
629.   **<****div** id="BottomLeftTriangle"**>****</****div****>**  
630.     
631.   **<****div** id="BottomRightTriangle"**>****</****div****>**  
632.     
633.   **<****div** id="Burst8"**>****</****div****>**  
634.     
635.   **<****div** id="Burst12"**>****</****div****>**  
636. **</****body****>**  
637. **</****html****>**

多角形绘制比较复杂，比如五角星，八角形等。

心形和五角星复杂，但很常用，灵活运用可以使我们的网站更加炫酷。

以后如果遇到其他用CSS直接绘制的图形，会收集补充到这。

转自：http://blog.csdn.net/wp1603710463/article/details/51180912

[http_blog.csdn.net_chenhongwu666_article_details_38905803]: http://blog.csdn.net/chenhongwu666/article/details/38905803
[SouthEast]: /images/20220724/fe0398cadfc5444a8195c79a9d232c32.png
[view plain]: http://blog.csdn.net/wp1603710463/article/details/51180912#
[CODE]: https://code.csdn.net/assets/CODE_ico.png
[CODE_CODE]: https://code.csdn.net/snippets/1652075
[ico_fork.svg]: https://code.csdn.net/assets/ico_fork.svg
[ico_fork.svg 1]: https://code.csdn.net/snippets/1652075/fork
[SouthEast 1]: /images/20220724/7a57906887d24065ad03a0b64720cb01.png
[SouthEast 2]: /images/20220724/da3f37ae128e4158805fea39ac1d1c23.png
[SouthEast 3]: /images/20220724/9dc7e7ee72634b4681702e58259b4d45.png
[SouthEast 4]: /images/20220724/42fbbec112154cd4bd353b5d4831c8b7.png
[SouthEast 5]: /images/20220724/736e92e8a8894b5b8d9c4de50de95f32.png
[SouthEast 6]: /images/20220724/6092ad7ff4c1444fa95d4a1f7dc6f885.png
[SouthEast 7]: /images/20220724/5fb2d2f5aaf04de096bf7fcb32aa96a0.png
[SouthEast 8]: /images/20220724/596c60b6f8cf4d729dd5da3b5aecde2f.png
[SouthEast 9]: /images/20220724/cfe1abeaef9a45338e8c8311e416d38b.png
[SouthEast 10]: /images/20220724/8618cbf98425408fb902c07f639481c2.png
[SouthEast 11]: /images/20220724/ec25b5d8a1f445aabd243f38917307a8.png
[SouthEast 12]: /images/20220724/184f61261791415cad64e8fdac5e08c6.png
[SouthEast 13]: /images/20220724/c625e0b4ace145bfa9678708ed465287.png
[SouthEast 14]: /images/20220724/f2764431996749f599754fcfc7071a52.png
[SouthEast 15]: /images/20220724/15e914a0430e4bd9bd06d11e12fe538a.png
[SouthEast 16]: /images/20220724/a27280f5517a449695f1e94da04da113.png
[SouthEast 17]: /images/20220724/adeef1a9f43448db9cf47ee872566af9.png
[SouthEast 18]: /images/20220724/6359e3ee4e6f4c2aadf4f435e3402d80.png
[SouthEast 19]: /images/20220724/0a4dae61921142c49fc5f5ae8520ad0e.png
[SouthEast 20]: /images/20220724/1ffecf122d7549b0a533043f359c2f57.png
[SouthEast 21]: /images/20220724/a41ab248b9604e8c848c6f68806b68d4.png
[SouthEast 22]: /images/20220724/a0381d810d6d45e9806d4021e05c2b5d.png
[SouthEast 23]: /images/20220724/ab7889e4b95049cab359121c806c19d9.png
[SouthEast 24]: /images/20220724/865cc94ce9f74101a80778bfd3c087ec.png
[SouthEast 25]: /images/20220724/e3ff0250cd734069897c3b6992edf00e.png
[SouthEast 26]: /images/20220724/ea532cd0160c4201b3dfa64422891271.png
[SouthEast 27]: /images/20220724/78a737179156437281f1bdb284523674.png
[SouthEast 28]: /images/20220724/ac73b751286a4d3bbb25b1107b1f8355.png
[SouthEast 29]: /images/20220724/0f4d1d88447e47338bebf1f10eaed18b.png
[SouthEast 30]: /images/20220724/4d91a378c021466dab2c1f3f4b1715bf.png
[SouthEast 31]: /images/20220724/00533b2940544bf492095e2e9396012b.png
[SouthEast 32]: /images/20220724/de655ed125144fadb26f4255566f82ed.png

发表评论取消回复

表情：

评论列表（有 0 条评论，110人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS3动画的基本使用（CSS3）

CSS3动画的基本使用（CSS3） <!DOCTYPE html> <html lang="en"> <head> <m

不念不忘少年蓝@/ 2023年10月03日 13:46/ 0 赞/ 110 阅读

相关 python基本图形绘制_python基本图形绘制

day 02 编程语言的分类 \ 机器语言直接和硬件交互 \ 优点：执行效率高 \ 缺点：开发效率低 \ 汇编语言直接和硬件交互 \ 优点(较机器语言)：开发效

左手的ㄟ右手/ 2022年10月25日 15:23/ 0 赞/ 335 阅读

相关 SVG+JS path等值变化实现CSS3兴叹的图形动画

一、CSS3动画交互的局限 CSS3也能实现很多精彩的动画效果，配合`transform`新增的多个变换，以及`animation`的延时、重复次数、前后端状态控制等，可

男娘i/ 2022年08月23日 09:00/ 0 赞/ 56 阅读

相关 css实现正方形div的3种方式

1.CSS3 vw 单位 1vw = 1% viewport width <div class="vw">hello,viewport</div> .vw

缺乏、安全感/ 2022年08月22日 04:48/ 0 赞/ 38 阅读

相关 CSS3实现32种基本图形

CSS3可以实现很多漂亮的图形，我收集了32种图形，在下面列出。直接用CSS3画出这些图形，要比贴图性能更好，体验更加，是一种非常好的网页美观方式。

迈不过友情╰/ 2022年07月30日 14:56/ 0 赞/ 111 阅读

相关 CSS3实现32种基本图形

CSS3实现32种基本图形 CSS3可以实现很多漂亮的图形，我收集了32种图形，在下面列出。直接用CSS3画出这些图形，要比贴图性能更好，体验更加，是一种非常好的网页美观方式

谁践踏了优雅/ 2022年07月30日 13:51/ 0 赞/ 78 阅读

相关 css3绘制各种图形效果

如何使用CSS来制作图形，比如说圆形，半圆形，三角形等。今天我特意在网上查阅了一下，介绍这样的教程还是蛮多的，因此我也决定整理一份相关教程出来与大家一起分享。如何工作？

叁歲伎倆/ 2022年07月24日 03:25/ 0 赞/ 300 阅读

相关常用Css3特效和图形

整理了一些常用的css效果和css图形，方便自己查看和使用。不喜勿喷，谢谢。截图: ![20180605175041852][] 预览地址：[https://www.b

秒速五厘米/ 2022年05月23日 08:37/ 0 赞/ 224 阅读

相关 DOCKER图形页面管理工具--3种。

基本上是3个工具，DOCKER UI，shipyard,portainer。对比后，shipyard最强大，其次是portainer,最后是docker ui。

太过爱你忘了你带给我的痛/ 2022年02月19日 12:39/ 0 赞/ 258 阅读

相关 CSS3制作图形大全——碉堡了

为方便观看效果图，请移步原文：[https://www.jqhtml.com/8045.html][https_www.jqhtml.com_8045.html] Sq

- 日理万妓/ 2022年01月06日 15:47/ 0 赞/ 245 阅读