-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathText.html
133 lines (101 loc) · 13.7 KB
/
Text.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
html, body {font-family:segoe ui light;}
#Square {width: 100px;height: 100px;background: red;}
#Rectangle{width: 120px;height: 80px;background: red;}
#Circle{width: 100px;height: 100px;background: red;border-radius: 50%}
#Oval{width: 200px;height: 100px;background: red;border-radius: 100px / 50px;}
#Triangle { width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 100px solid red;}
#Inverted_Triangle { width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-top: 100px solid red;}
#Left_Triangle { width: 0;height: 0;border-top: 50px solid transparent;border-right: 100px solid red;border-bottom: 50px solid transparent;}
#Right_Triangle { width: 0;height: 0;border-top: 50px solid transparent;border-left: 100px solid red;border-bottom: 50px solid transparent;}
#Left_Right_Triangle { width: 0;height: 0;border-top: 100px solid red;border-right: 100px solid transparent;}
#Right_Right_Triangle{ width: 0;height: 0;border-top: 100px solid red;border-left: 100px solid transparent;}
#Left_Top_Triangle { width: 0;height: 0;border-bottom: 100px solid red;border-right: 100px solid transparent;}
#Right_Top_Triangle{width: 0;height: 0;border-bottom: 100px solid red;border-left: 100px solid transparent;}
#Trapezoid {<br />border-bottom: 100px solid red;<br />border-left: 25px solid transparent;<br />border-right: 25px solid transparent;<br />height: 0;<br />width: 100px;<br />}
#Parallelogram { width: 150px;height: 100px;transform: skew(20deg);background: red;}
#star-six {width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 100px solid red;position: relative;}
#star-six:after {width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-top: 100px solid red;position: absolute;content: "";top: 30px;left: -50px;}
#star-five {margin: 50px 0;position: relative;display: block;color: red;width: 0px;height: 0px;border-right: 100px solid transparent;border-bottom: 70px solid red;border-left: 100px solid transparent;transform: rotate(35deg);}
#star-five:before {border-bottom: 80px solid red;border-left: 30px solid transparent;border-right: 30px solid transparent;position: absolute;height: 0;width: 0;top: -45px;left: -65px;display: block;content: '';transform: rotate(-35deg);}
#star-five:after {position: absolute;display: block;color: red;top: 3px;left: -105px;width: 0px;height: 0px;border-right: 100px solid transparent;border-bottom: 70px solid red;border-left: 100px solid transparent;transform: rotate(-70deg);content: '';}
#pentagon {position: relative;width: 54px;box-sizing: content-box;border-width: 50px 18px 0;border-style: solid;border-color: red transparent;}
#pentagon:before {content: "";position: absolute;height: 0;width: 0;top: -85px;left: -18px;border-width: 0 45px 35px;border-style: solid;border-color: transparent transparent red;}
#hexagon {width: 100px;height: 57.735px;background: red;position: relative;}
#hexagon::before {content: "";position: absolute;top: -28.8675px;left: 0;width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 28.8675px solid red;}
#hexagon::after {content: "";position: absolute;bottom: -28.8675px;left: 0;width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-top: 28.8675px solid red;}
#octagon {width: 100px;height: 100px;background: red;position: relative;}
#octagon:before {content: "";width: 100px;height: 0;position: absolute;top: 0;left: 0;border-bottom: 29px solid red;border-left: 29px solid #eee;border-right: 29px solid #eee;}
#octagon:after {content: "";width: 100px;height: 0;position: absolute;bottom: 0;left: 0;border-top: 29px solid red;border-left: 29px solid #eee;border-right: 29px solid #eee;}
#heart {position: relative;width: 100px;height: 90px;}
#heart:before,
#heart:after {position: absolute;content: "";left: 50px;top: 0;width: 50px;height: 80px;background: red;border-radius: 50px 50px 0 0;transform: rotate(-45deg);transform-origin: 0 100%;}
#heart:after {left: 0;transform: rotate(45deg);transform-origin: 100% 100%;}
#infinity {position: relative;width: 212px;height: 100px;box-sizing: content-box;}
#infinity:before,
#infinity:after {content: "";box-sizing: content-box;position: absolute;top: 0;left: 0;width: 60px;height: 60px;border: 20px solid red;border-radius: 50px 50px 0 50px;transform: rotate(-45deg);}
#infinity:after {left: auto;right: 0;border-radius: 50px 50px 50px 0;transform: rotate(45deg);}
#diamond {width: 0;height: 0;border: 50px solid transparent;border-bottom-color: red;position: relative;top: -50px;}
#diamond:after {content: '';position: absolute;left: -50px;top: 50px;width: 0;height: 0;border: 50px solid transparent;border-top-color: red;}
#diamond-shield {width: 0;height: 0;border: 50px solid transparent;border-bottom: 20px solid red;position: relative;top: -50px;}
#diamond-shield:after {content: '';position: absolute;left: -50px;top: 20px;width: 0;height: 0;border: 50px solid transparent;border-top: 70px solid red;}
#diamond-narrow {width: 0;height: 0;border: 50px solid transparent;border-bottom: 70px solid red;position: relative;top: -50px;}
#diamond-narrow:after {content: '';position: absolute;left: -50px;top: 70px;width: 0;height: 0;border: 50px solid transparent;border-top: 70px solid red;}
#cut-diamond {border-style: solid;border-color: transparent transparent red transparent;border-width: 0 25px 25px 25px;height: 0;width: 50px;box-sizing: content-box;position: relative;margin: 20px 0 50px 0;}
#cut-diamond:after {content: "";position: absolute;top: 25px;left: -25px;width: 0;height: 0;border-style: solid;border-color: red transparent transparent transparent;border-width: 70px 50px 0 50px;}
#egg{display: block;width: 126px;height: 180px;background-color: red;border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;}
#pacman {width: 0px;height: 0px;border-right: 60px solid transparent;border-top: 60px solid red;border-left: 60px solid red;border-bottom: 60px solid red;border-top-left-radius: 60px;border-top-right-radius: 60px;border-bottom-left-radius: 60px;border-bottom-right-radius: 60px;}
#talkbubble {width: 120px;height: 80px;background: red;position: relative;-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px;}
#talkbubble:before {content: "";position: absolute;right: 100%;top: 26px;width: 0;height: 0;border-top: 13px solid transparent;border-right: 26px solid red;border-bottom: 13px solid transparent;}
#rss {width: 20em;height: 20em;border-radius: 3em;background-color: #ff0000;font-size: 14px;}
#rss:before {content: '';z-index: 1;display: block;height: 5em;width: 5em;background: #fff;border-radius: 50%;position: relative;top: 11.5em;left: 3.5em;}
#rss:after {content: '';display: block;background: #ff0000;width: 13em;height: 13em;top: -2em;left: 3.8em;border-radius: 2.5em;position: relative;box-shadow:-2em 2em 0 0 #fff inset,-4em 4em 0 0 #ff0000 inset,-6em 6em 0 0 #fff inset}
#burst-12 {background: red;width: 80px;height: 80px;position: relative;text-align: center;}
#burst-12:before,
#burst-12:after {content: "";position: absolute;top: 0;left: 0;height: 80px;width: 80px;background: red;}
#burst-12:before {transform: rotate(30deg);}
#burst-12:after {transform: rotate(60deg);}
#burst-8 {background: red;width: 80px;height: 80px;position: relative;text-align: center;transform: rotate(20deg);}
#burst-8:before {content: "";position: absolute;top: 0;left: 0;height: 80px;width: 80px;background: red;transform: rotate(135deg);}
#yin-yang {width: 96px;box-sizing: content-box;height: 48px;background: #eee;border-color: red;border-style: solid;border-width: 2px 2px 50px 2px;border-radius: 100%;position: relative;}
#yin-yang:before {content: "";position: absolute;top: 50%;left: 0;background: #eee;border: 18px solid red;border-radius: 100%;width: 12px;height: 12px;box-sizing: content-box;}
#yin-yang:after {content: "";position: absolute;top: 50%;left: 50%;background: red;border: 18px solid #eee;border-radius: 100%;width: 12px;height: 12px;box-sizing: content-box;}
#badge-ribbon { position: relative; background: red; height: 100px; width: 100px; border-radius: 50px; }
#badge-ribbon:before,
#badge-ribbon:after { content: ''; position: absolute; border-bottom: 70px solid red; border-left: 40px solid transparent; border-right: 40px solid transparent; top: 70px; left: -10px; transform: rotate(-140deg); }
#badge-ribbon:after { left: auto; right: -10px; transform: rotate(140deg); }
#space-invader { box-shadow: 0 0 0 1em red, 0 1em 0 1em red, -2.5em 1.5em 0 .5em red, 2.5em 1.5em 0 .5em red, -3em -3em 0 0 red, 3em -3em 0 0 red, -2em -2em 0 0 red, 2em -2em 0 0 red, -3em -1em 0 0 red, -2em -1em 0 0 red, 2em -1em 0 0 red, 3em -1em 0 0 red, -4em 0 0 0 red, -3em 0 0 0 red, 3em 0 0 0 red, 4em 0 0 0 red, -5em 1em 0 0 red, -4em 1em 0 0 red, 4em 1em 0 0 red, 5em 1em 0 0 red, -5em 2em 0 0 red, 5em 2em 0 0 red, -5em 3em 0 0 red, -3em 3em 0 0 red, 3em 3em 0 0 red, 5em 3em 0 0 red, -2em 4em 0 0 red, -1em 4em 0 0 red, 1em 4em 0 0 red, 2em 4em 0 0 red; background: red; width: 1em; height: 1em; overflow: hidden; margin: 50px 0 70px 65px; }
#tv { position: relative; width: 200px; height: 150px; margin: 20px 0; background: red; border-radius: 50% / 10%; color: white; text-align: center; text-indent: .1em; }
#tv:before { content: ''; position: absolute; top: 10%; bottom: 10%; right: -5%; left: -5%; background: inherit; border-radius: 5% / 50%; }
#chevron { position: relative; text-align: center; padding: 12px; margin-bottom: 6px; height: 60px; width: 200px; }
#chevron:before { content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 51%; background: red; transform: skew(0deg, 6deg); }
#chevron:after { content: ''; position: absolute; top: 0; right: 0; height: 100%; width: 50%; background: red; transform: skew(0deg, -6deg); }
#magnifying-glass { font-size: 10em; display: inline-block; width: 0.4em; box-sizing: content-box; height: 0.4em; border: 0.1em solid red; position: relative; border-radius: 0.35em; }
#magnifying-glass:before { content: ""; display: inline-block; position: absolute; right: -0.25em; bottom: -0.1em; border-width: 0; background: red; width: 0.35em; height: 0.08em; transform: rotate(45deg); }
#facebook-icon { background: red; text-indent: -999em; width: 100px; height: 110px; box-sizing: content-box; border-radius: 5px; position: relative; overflow: hidden; border: 15px solid red; border-bottom: 0; }
#facebook-icon:before { content: "/20"; position: absolute; background: red; width: 40px; height: 90px; bottom: -30px; right: -37px; border: 20px solid #eee; border-radius: 25px; box-sizing: content-box; }
#facebook-icon:after { content: "/20"; position: absolute; width: 55px; top: 50px; height: 20px; background: #eee; right: 5px; box-sizing: content-box; }
#moon { width: 80px; height: 80px; border-radius: 50%; box-shadow: 15px 15px 0 0 red; }
#flag { width: 110px; height: 56px; box-sizing: content-box; padding-top: 15px; position: relative; background: red; color: white; font-size: 11px; letter-spacing: 0.2em; text-align: center; text-transform: uppercase; }
#flag:after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 0; border-bottom: 13px solid #eee; border-left: 55px solid transparent; border-right: 55px solid transparent; }
#cross { background: red; height: 100px; position: relative; width: 20px; }
#cross:after { background: red; content: ""; height: 20px; left: -40px; position: absolute; top: 40px; width: 100px; }
#base { background: red; display: inline-block; height: 55px; margin-left: 20px; margin-top: 55px; position: relative; width: 100px; }
#base:before { border-bottom: 35px solid red; border-left: 50px solid transparent; border-right: 50px solid transparent; content: ""; height: 0; left: 0; position: absolute; top: -35px; width: 0; }
#pointer { width: 200px; height: 40px; position: relative; background: red; }
#pointer:after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 0; border-left: 20px solid white; border-top: 20px solid transparent; border-bottom: 20px solid transparent; }
#pointer:before { content: ""; position: absolute; right: -20px; bottom: 0; width: 0; height: 0; border-left: 20px solid red; border-top: 20px solid transparent; border-bottom: 20px solid transparent; }
#lock { font-size: 8px; position: relative; width: 18em; height: 13em; border-radius: 2em; top: 10em; box-sizing: border-box; border: 3.5em solid red; border-right-width: 7.5em; border-left-width: 7.5em; margin: 0 0 6rem 0; }
#lock:before { content: ""; box-sizing: border-box; position: absolute; border: 2.5em solid red; width: 14em; height: 12em; left: 50%; margin-left: -7em; top: -12em; border-top-left-radius: 7em; border-top-right-radius: 7em; }
#lock:after { content: ""; box-sizing: border-box; position: absolute; border: 1em solid red; width: 5em; height: 8em; border-radius: 2.5em; left: 50%; top: -1em; margin-left: -2.5em; }
#curved-corner-bottomleft,
#curved-corner-bottomright,
#curved-corner-topleft,
#curved-corner-topright { width: 100px; height: 100px; overflow: hidden; position: relative; }
#curved-corner-bottomleft:before,
#curved-corner-bottomright:before,
#curved-corner-topleft:before,
#curved-corner-topright:before { content: ""; display: block; width: 200%; height: 200%; position: absolute; border-radius: 50%; }
#curved-corner-bottomleft:before { bottom: 0; left: 0; box-shadow: -50px 50px 0 0 red; }
#curved-corner-bottomright:before { bottom: 0; right: 0; box-shadow: 50px 50px 0 0 red; }
#curved-corner-topleft:before { top: 0; left: 0; box-shadow: -50px -50px 0 0 red; }
#curved-corner-topright:before { top: 0; right: 0; box-shadow: 50px -50px 0 0 red; }