-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathBaseGraph.html
152 lines (116 loc) · 4.51 KB
/
BaseGraph.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/BaseGraph.css">
<script type="text/javascript">
</script>
</head>
<body>
<!-- 圆形：设置宽度和高度相等，border-radius属性为宽度或高度的一半 -->
<div id="Circle"></div>
<br><br>
<!-- 椭圆形：圆形的变体，高度设置为宽度的一半，border-radius属性为高度除以高度一半 -->
<div id="Oval"></div>
<br><br>
<!-- 三角形：宽度和高度设置为0，border设置左，右边透明，底边可见Solid -->
<div id="Triangle"></div>
<br><br>
<!-- 倒三角形：宽度和高度设置为0，border设置左，右边透明，顶边可见Solid -->
<div id="InvertedTriangle"></div>
<br><br>
<!-- 左三角形：宽度和高度设置为0，border设置上，下边透明，右边可见Solid -->
<div id="LeftTriangle"></div>
<br><br>
<!-- 右三角形：宽度和高度设置为0，border设置上，下边透明，左边可见Solid -->
<div id="RightTriangle"></div>
<br><br>
<!-- 菱形：使用transform和rotate相结合，使两个正反三角形上下显示 -->
<div id="Diamond"></div>
<br><br>
<!-- 梯形：三角形的变体，设置左右两条边相等，并且给它设置一个宽度 -->
<div id="Trapezium"></div>
<br><br>
<!-- 长方形：宽比高长 -->
<div id="Rectangle"></div>
<br><br>
<!-- 浮动Div换行 -->
<div style="clear:both"></div>
<br><br>
<!-- 正方形：宽和高相等 -->
<div id="Square"></div>
<br><br>
<!-- 圆环：在圆形的基础上设置边界，边界颜色与圆形填充颜色不同 -->
<div id="Ring"></div>
<br><br>
<!-- 平行四边形：使用transform使长方形倾斜一个角度 -->
<div id="Parallelogram"></div>
<br><br>
<!-- 五角星：星形的实现方式比较复杂，主要是使用transform属性来旋转不同的边 -->
<div id="FiveStar"></div>
<br><br>
<!-- 六角星：使用transform属性来旋转不同的边 -->
<div id="SixStar"></div>
<br><br>
<!-- 五边形：可以采用三角形和梯形组合 -->
<div id="Pentagon"></div>
<br><br>
<!-- 六边形：在长方形上面和下面各放置一个三角形 -->
<div id="Hexagon"></div>
<br><br>
<!-- 八边形：在长方形上面和下面各放置一个梯形 -->
<div id="Octagon"></div>
<br><br>
<!-- 心形：心形的制作是非常复杂的，可以使用伪元素来制作，分别将伪元素旋转不同的角度，并修改transform-origin属性来设置元素的旋转中心点 -->
<div id="Heart"></div>
<br><br>
<!-- 浮动Div换行 -->
<div style="clear:both"></div>
<br><br>
<!-- 蛋形：椭圆形的变体，高度比宽度稍大，设置正确的border-radius属性 -->
<div id="Egg"></div>
<br><br>
<!-- 无穷符号：通过border属性和设置伪元素的角度来实现 -->
<div id="Infinity"></div>
<br><br>
<!-- 消息提示框：一个圆角矩形加左边中间的一个小三角形 -->
<div id="CommentBubble"></div>
<br><br>
<!-- 钻石：上面一个梯形，下面一个三角形组成 -->
<div id="Diamonds"></div>
<br><br>
<!-- 八卦图：多个圆形的组合-->
<div id="EightDiagrams"></div>
<br><br>
<!-- 食豆人：设置border和border-top-left-radius，border-bottom-right-radius等属性-->
<div id="PacMan"></div>
<br><br>
<!-- 扇形：在三角形的基础上，让其中一边成弧形 -->
<div id="Sector"></div>
<br><br>
<!-- 月牙：由两条弧线组成的，每个弧线可以看成一个圆的一部分弧长，在圆的基础上让圆有一个阴影可以形成一个月牙 -->
<div id="CrescentMoon"></div>
<br><br>
<!-- 浮动Div换行 -->
<div style="clear:both"></div>
<br><br>
<!-- 顶左直角三角形 -->
<div id="TopLeftTriangle"></div>
<br><br>
<!-- 顶右直角三角形 -->
<div id="TopRightTriangle"></div>
<br><br>
<!-- 底左直角三角形 -->
<div id="BottomLeftTriangle"></div>
<br><br>
<!-- 底右直角三角形 -->
<div id="BottomRightTriangle"></div>
<br><br>
<!-- 八角形 -->
<div id="Burst8"></div>
<br><br>
<!-- 十二角形 -->
<div id="Burst12"></div>
</body>
</html>