css_shapes 0.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/.gitignore +5 -0
- data/Gemfile +4 -0
- data/README.md +91 -0
- data/Rakefile +14 -0
- data/assets/_shapes.scss +329 -0
- data/css_shapes.gemspec +22 -0
- data/example/example.html +1079 -0
- data/example/src/samples.yml +52 -0
- data/example/src/template.erb +73 -0
- data/lib/css_shapes.rb +13 -0
- data/lib/css_shapes/example.rb +88 -0
- data/lib/css_shapes/railtie.rb +12 -0
- data/lib/css_shapes/source.rb +59 -0
- data/lib/css_shapes/tasks/css_shapes.rake +14 -0
- data/lib/css_shapes/version.rb +3 -0
- metadata +79 -0
data/css_shapes.gemspec
ADDED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
# -*- encoding: utf-8 -*-
|
|
2
|
+
$:.push File.expand_path("../lib", __FILE__)
|
|
3
|
+
require "css_shapes/version"
|
|
4
|
+
|
|
5
|
+
Gem::Specification.new do |s|
|
|
6
|
+
s.name = "css_shapes"
|
|
7
|
+
s.version = CSSShapes::VERSION
|
|
8
|
+
s.authors = ["Bruce Williams"]
|
|
9
|
+
s.email = ["bruce@codefluency.com"]
|
|
10
|
+
s.homepage = "http://github.com/bruce/css_shapes"
|
|
11
|
+
s.summary = %q{Provides SCSS for various CSS shapes}
|
|
12
|
+
s.description = %q{SCSS library for shapes. Sources: http://css-tricks.com/examples/ShapesOfCSS/, ...}
|
|
13
|
+
|
|
14
|
+
s.files = `git ls-files`.split("\n")
|
|
15
|
+
s.test_files = `git ls-files -- {test,spec,features}/*`.split("\n")
|
|
16
|
+
s.executables = `git ls-files -- bin/*`.split("\n").map{ |f| File.basename(f) }
|
|
17
|
+
s.require_paths = ["lib"]
|
|
18
|
+
|
|
19
|
+
# specify any dependencies here; for example:
|
|
20
|
+
# s.add_development_dependency "rspec"
|
|
21
|
+
# s.add_runtime_dependency "rest-client"
|
|
22
|
+
end
|
|
@@ -0,0 +1,1079 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<style>
|
|
5
|
+
body { font-family: 'Helvetica', 'Verdana', sans-serif; }
|
|
6
|
+
.container { width: 960px; margin: 0 auto; }
|
|
7
|
+
h1 {
|
|
8
|
+
font-family: 'Arial Rounded MT Bold', 'Verdana', 'Helvetica', sans-serif;
|
|
9
|
+
padding: 10px;
|
|
10
|
+
background: #ddd;
|
|
11
|
+
border-bottom: #ccc 1px solid;
|
|
12
|
+
}
|
|
13
|
+
style[contenteditable] {
|
|
14
|
+
display: block;
|
|
15
|
+
white-space: pre;
|
|
16
|
+
background: #333;
|
|
17
|
+
color: white;
|
|
18
|
+
font: 12px Monaco;
|
|
19
|
+
padding: 10px;
|
|
20
|
+
height: 50px;
|
|
21
|
+
overflow: hidden;
|
|
22
|
+
margin-bottom: 20px;
|
|
23
|
+
}
|
|
24
|
+
.star-five style[contenteditable],
|
|
25
|
+
.pentagon style[contenteditable],
|
|
26
|
+
.hexagon style[contenteditable] {
|
|
27
|
+
margin-bottom: 40px;
|
|
28
|
+
}
|
|
29
|
+
.samples {
|
|
30
|
+
list-style: none;
|
|
31
|
+
margin: 0;
|
|
32
|
+
padding: 0;
|
|
33
|
+
}
|
|
34
|
+
.samples li {
|
|
35
|
+
width: 300px;
|
|
36
|
+
padding: 10px;
|
|
37
|
+
display: inline-block;
|
|
38
|
+
vertical-align: top;
|
|
39
|
+
border-right: 1px #bbb dashed;
|
|
40
|
+
}
|
|
41
|
+
.samples li:last-child {
|
|
42
|
+
border: 0;
|
|
43
|
+
}
|
|
44
|
+
.shape {
|
|
45
|
+
margin: 0 auto 40px;
|
|
46
|
+
}
|
|
47
|
+
</style>
|
|
48
|
+
</head>
|
|
49
|
+
<body>
|
|
50
|
+
<div id='container'>
|
|
51
|
+
|
|
52
|
+
<section class='square'>
|
|
53
|
+
<header><h1>square</h1></header>
|
|
54
|
+
<dl>
|
|
55
|
+
|
|
56
|
+
<dt>color</dt>
|
|
57
|
+
<dd>Required</dd>
|
|
58
|
+
|
|
59
|
+
<dt>size</dt>
|
|
60
|
+
<dd>Optional</dd>
|
|
61
|
+
|
|
62
|
+
</dl>
|
|
63
|
+
<ul class='samples'>
|
|
64
|
+
|
|
65
|
+
<li>
|
|
66
|
+
<style>#shape_sample_square_1 {
|
|
67
|
+
width: 100px;
|
|
68
|
+
height: 100px;
|
|
69
|
+
background: red; }
|
|
70
|
+
</style>
|
|
71
|
+
<style contenteditable>#shape {
|
|
72
|
+
@include square(red);
|
|
73
|
+
}</style>
|
|
74
|
+
<div id='shape_sample_square_1' class='shape square'></div>
|
|
75
|
+
</li>
|
|
76
|
+
|
|
77
|
+
<li>
|
|
78
|
+
<style>#shape_sample_square_2 {
|
|
79
|
+
width: 120px;
|
|
80
|
+
height: 120px;
|
|
81
|
+
background: rgba(120, 120, 120, 0.8); }
|
|
82
|
+
</style>
|
|
83
|
+
<style contenteditable>#shape {
|
|
84
|
+
@include square(rgba(120, 120, 120, 0.8), 120px);
|
|
85
|
+
}</style>
|
|
86
|
+
<div id='shape_sample_square_2' class='shape square'></div>
|
|
87
|
+
</li>
|
|
88
|
+
|
|
89
|
+
<li>
|
|
90
|
+
<style>#shape_sample_square_3 {
|
|
91
|
+
width: 80px;
|
|
92
|
+
height: 80px;
|
|
93
|
+
background: #fab444; }
|
|
94
|
+
</style>
|
|
95
|
+
<style contenteditable>#shape {
|
|
96
|
+
@include square(#fab444, 80px);
|
|
97
|
+
}</style>
|
|
98
|
+
<div id='shape_sample_square_3' class='shape square'></div>
|
|
99
|
+
</li>
|
|
100
|
+
|
|
101
|
+
</ul>
|
|
102
|
+
</section>
|
|
103
|
+
|
|
104
|
+
<section class='rectangle'>
|
|
105
|
+
<header><h1>rectangle</h1></header>
|
|
106
|
+
<dl>
|
|
107
|
+
|
|
108
|
+
<dt>color</dt>
|
|
109
|
+
<dd>Required</dd>
|
|
110
|
+
|
|
111
|
+
<dt>width</dt>
|
|
112
|
+
<dd>Optional</dd>
|
|
113
|
+
|
|
114
|
+
<dt>height</dt>
|
|
115
|
+
<dd>Optional</dd>
|
|
116
|
+
|
|
117
|
+
</dl>
|
|
118
|
+
<ul class='samples'>
|
|
119
|
+
|
|
120
|
+
<li>
|
|
121
|
+
<style>#shape_sample_rectangle_1 {
|
|
122
|
+
width: 200px;
|
|
123
|
+
height: 100px;
|
|
124
|
+
background: red; }
|
|
125
|
+
</style>
|
|
126
|
+
<style contenteditable>#shape {
|
|
127
|
+
@include rectangle(red);
|
|
128
|
+
}</style>
|
|
129
|
+
<div id='shape_sample_rectangle_1' class='shape rectangle'></div>
|
|
130
|
+
</li>
|
|
131
|
+
|
|
132
|
+
<li>
|
|
133
|
+
<style>#shape_sample_rectangle_2 {
|
|
134
|
+
width: 120px;
|
|
135
|
+
height: 10px;
|
|
136
|
+
background: red; }
|
|
137
|
+
</style>
|
|
138
|
+
<style contenteditable>#shape {
|
|
139
|
+
@include rectangle(red, 120px, 10px);
|
|
140
|
+
}</style>
|
|
141
|
+
<div id='shape_sample_rectangle_2' class='shape rectangle'></div>
|
|
142
|
+
</li>
|
|
143
|
+
|
|
144
|
+
</ul>
|
|
145
|
+
</section>
|
|
146
|
+
|
|
147
|
+
<section class='circle'>
|
|
148
|
+
<header><h1>circle</h1></header>
|
|
149
|
+
<dl>
|
|
150
|
+
|
|
151
|
+
<dt>color</dt>
|
|
152
|
+
<dd>Required</dd>
|
|
153
|
+
|
|
154
|
+
<dt>diameter</dt>
|
|
155
|
+
<dd>Optional</dd>
|
|
156
|
+
|
|
157
|
+
</dl>
|
|
158
|
+
<ul class='samples'>
|
|
159
|
+
|
|
160
|
+
<li>
|
|
161
|
+
<style>#shape_sample_circle_1 {
|
|
162
|
+
width: 100px;
|
|
163
|
+
height: 100px;
|
|
164
|
+
background: red;
|
|
165
|
+
-moz-border-radius: 50px;
|
|
166
|
+
-webkit-border-radius: 50px;
|
|
167
|
+
border-radius: 50px; }
|
|
168
|
+
</style>
|
|
169
|
+
<style contenteditable>#shape {
|
|
170
|
+
@include circle(red);
|
|
171
|
+
}</style>
|
|
172
|
+
<div id='shape_sample_circle_1' class='shape circle'></div>
|
|
173
|
+
</li>
|
|
174
|
+
|
|
175
|
+
<li>
|
|
176
|
+
<style>#shape_sample_circle_2 {
|
|
177
|
+
width: 2em;
|
|
178
|
+
height: 2em;
|
|
179
|
+
background: yellow;
|
|
180
|
+
-moz-border-radius: 1em;
|
|
181
|
+
-webkit-border-radius: 1em;
|
|
182
|
+
border-radius: 1em; }
|
|
183
|
+
</style>
|
|
184
|
+
<style contenteditable>#shape {
|
|
185
|
+
@include circle(#ff0, 2em);
|
|
186
|
+
}</style>
|
|
187
|
+
<div id='shape_sample_circle_2' class='shape circle'></div>
|
|
188
|
+
</li>
|
|
189
|
+
|
|
190
|
+
</ul>
|
|
191
|
+
</section>
|
|
192
|
+
|
|
193
|
+
<section class='oval'>
|
|
194
|
+
<header><h1>oval</h1></header>
|
|
195
|
+
<dl>
|
|
196
|
+
|
|
197
|
+
<dt>color</dt>
|
|
198
|
+
<dd>Required</dd>
|
|
199
|
+
|
|
200
|
+
<dt>width</dt>
|
|
201
|
+
<dd>Optional</dd>
|
|
202
|
+
|
|
203
|
+
<dt>height</dt>
|
|
204
|
+
<dd>Optional</dd>
|
|
205
|
+
|
|
206
|
+
</dl>
|
|
207
|
+
<ul class='samples'>
|
|
208
|
+
|
|
209
|
+
<li>
|
|
210
|
+
<style>#shape_sample_oval_1 {
|
|
211
|
+
width: 200px;
|
|
212
|
+
height: 100px;
|
|
213
|
+
background: red;
|
|
214
|
+
-moz-border-radius: 100px / 50px;
|
|
215
|
+
-webkit-border-radius: 100px / 50px;
|
|
216
|
+
border-radius: 100px / 50px; }
|
|
217
|
+
</style>
|
|
218
|
+
<style contenteditable>#shape {
|
|
219
|
+
@include oval(red);
|
|
220
|
+
}</style>
|
|
221
|
+
<div id='shape_sample_oval_1' class='shape oval'></div>
|
|
222
|
+
</li>
|
|
223
|
+
|
|
224
|
+
<li>
|
|
225
|
+
<style>#shape_sample_oval_2 {
|
|
226
|
+
width: 60px;
|
|
227
|
+
height: 10px;
|
|
228
|
+
background: black;
|
|
229
|
+
-moz-border-radius: 30px / 5px;
|
|
230
|
+
-webkit-border-radius: 30px / 5px;
|
|
231
|
+
border-radius: 30px / 5px; }
|
|
232
|
+
</style>
|
|
233
|
+
<style contenteditable>#shape {
|
|
234
|
+
@include oval(#000, 60px, 10px);
|
|
235
|
+
}</style>
|
|
236
|
+
<div id='shape_sample_oval_2' class='shape oval'></div>
|
|
237
|
+
</li>
|
|
238
|
+
|
|
239
|
+
</ul>
|
|
240
|
+
</section>
|
|
241
|
+
|
|
242
|
+
<section class='triangle-up'>
|
|
243
|
+
<header><h1>triangle-up</h1></header>
|
|
244
|
+
<dl>
|
|
245
|
+
|
|
246
|
+
<dt>color</dt>
|
|
247
|
+
<dd>Required</dd>
|
|
248
|
+
|
|
249
|
+
<dt>width</dt>
|
|
250
|
+
<dd>Optional</dd>
|
|
251
|
+
|
|
252
|
+
<dt>height</dt>
|
|
253
|
+
<dd>Optional</dd>
|
|
254
|
+
|
|
255
|
+
</dl>
|
|
256
|
+
<ul class='samples'>
|
|
257
|
+
|
|
258
|
+
<li>
|
|
259
|
+
<style>#shape_sample_triangle-up_1 {
|
|
260
|
+
width: 0;
|
|
261
|
+
height: 0;
|
|
262
|
+
border-left: 50px solid transparent;
|
|
263
|
+
border-right: 50px solid transparent;
|
|
264
|
+
border-bottom: 100px solid red; }
|
|
265
|
+
</style>
|
|
266
|
+
<style contenteditable>#shape {
|
|
267
|
+
@include triangle-up(red);
|
|
268
|
+
}</style>
|
|
269
|
+
<div id='shape_sample_triangle-up_1' class='shape triangle-up'></div>
|
|
270
|
+
</li>
|
|
271
|
+
|
|
272
|
+
</ul>
|
|
273
|
+
</section>
|
|
274
|
+
|
|
275
|
+
<section class='triangle-down'>
|
|
276
|
+
<header><h1>triangle-down</h1></header>
|
|
277
|
+
<dl>
|
|
278
|
+
|
|
279
|
+
<dt>color</dt>
|
|
280
|
+
<dd>Required</dd>
|
|
281
|
+
|
|
282
|
+
<dt>width</dt>
|
|
283
|
+
<dd>Optional</dd>
|
|
284
|
+
|
|
285
|
+
<dt>height</dt>
|
|
286
|
+
<dd>Optional</dd>
|
|
287
|
+
|
|
288
|
+
</dl>
|
|
289
|
+
<ul class='samples'>
|
|
290
|
+
|
|
291
|
+
<li>
|
|
292
|
+
<style>#shape_sample_triangle-down_1 {
|
|
293
|
+
width: 0;
|
|
294
|
+
height: 0;
|
|
295
|
+
border-left: 50px solid transparent;
|
|
296
|
+
border-right: 50px solid transparent;
|
|
297
|
+
border-top: 100px solid red; }
|
|
298
|
+
</style>
|
|
299
|
+
<style contenteditable>#shape {
|
|
300
|
+
@include triangle-down(red);
|
|
301
|
+
}</style>
|
|
302
|
+
<div id='shape_sample_triangle-down_1' class='shape triangle-down'></div>
|
|
303
|
+
</li>
|
|
304
|
+
|
|
305
|
+
</ul>
|
|
306
|
+
</section>
|
|
307
|
+
|
|
308
|
+
<section class='triangle-left'>
|
|
309
|
+
<header><h1>triangle-left</h1></header>
|
|
310
|
+
<dl>
|
|
311
|
+
|
|
312
|
+
<dt>color</dt>
|
|
313
|
+
<dd>Required</dd>
|
|
314
|
+
|
|
315
|
+
<dt>width</dt>
|
|
316
|
+
<dd>Optional</dd>
|
|
317
|
+
|
|
318
|
+
<dt>height</dt>
|
|
319
|
+
<dd>Optional</dd>
|
|
320
|
+
|
|
321
|
+
</dl>
|
|
322
|
+
<ul class='samples'>
|
|
323
|
+
|
|
324
|
+
<li>
|
|
325
|
+
<style>#shape_sample_triangle-left_1 {
|
|
326
|
+
width: 0;
|
|
327
|
+
height: 0;
|
|
328
|
+
border-top: 50px solid transparent;
|
|
329
|
+
border-right: 100px solid red;
|
|
330
|
+
border-bottom: 50px solid transparent; }
|
|
331
|
+
</style>
|
|
332
|
+
<style contenteditable>#shape {
|
|
333
|
+
@include triangle-left(red);
|
|
334
|
+
}</style>
|
|
335
|
+
<div id='shape_sample_triangle-left_1' class='shape triangle-left'></div>
|
|
336
|
+
</li>
|
|
337
|
+
|
|
338
|
+
</ul>
|
|
339
|
+
</section>
|
|
340
|
+
|
|
341
|
+
<section class='triangle-right'>
|
|
342
|
+
<header><h1>triangle-right</h1></header>
|
|
343
|
+
<dl>
|
|
344
|
+
|
|
345
|
+
<dt>color</dt>
|
|
346
|
+
<dd>Required</dd>
|
|
347
|
+
|
|
348
|
+
<dt>width</dt>
|
|
349
|
+
<dd>Optional</dd>
|
|
350
|
+
|
|
351
|
+
<dt>height</dt>
|
|
352
|
+
<dd>Optional</dd>
|
|
353
|
+
|
|
354
|
+
</dl>
|
|
355
|
+
<ul class='samples'>
|
|
356
|
+
|
|
357
|
+
<li>
|
|
358
|
+
<style>#shape_sample_triangle-right_1 {
|
|
359
|
+
width: 0;
|
|
360
|
+
height: 0;
|
|
361
|
+
border-top: 50px solid transparent;
|
|
362
|
+
border-left: 100px solid red;
|
|
363
|
+
border-bottom: 50px solid transparent; }
|
|
364
|
+
</style>
|
|
365
|
+
<style contenteditable>#shape {
|
|
366
|
+
@include triangle-right(red);
|
|
367
|
+
}</style>
|
|
368
|
+
<div id='shape_sample_triangle-right_1' class='shape triangle-right'></div>
|
|
369
|
+
</li>
|
|
370
|
+
|
|
371
|
+
<li>
|
|
372
|
+
<style>#shape_sample_triangle-right_2 {
|
|
373
|
+
width: 0;
|
|
374
|
+
height: 0;
|
|
375
|
+
border-top: 15px solid transparent;
|
|
376
|
+
border-left: 180px solid #55ff00;
|
|
377
|
+
border-bottom: 15px solid transparent; }
|
|
378
|
+
</style>
|
|
379
|
+
<style contenteditable>#shape {
|
|
380
|
+
@include triangle-right(#5F0, 180px, 30px);
|
|
381
|
+
}</style>
|
|
382
|
+
<div id='shape_sample_triangle-right_2' class='shape triangle-right'></div>
|
|
383
|
+
</li>
|
|
384
|
+
|
|
385
|
+
</ul>
|
|
386
|
+
</section>
|
|
387
|
+
|
|
388
|
+
<section class='triangle-topleft'>
|
|
389
|
+
<header><h1>triangle-topleft</h1></header>
|
|
390
|
+
<dl>
|
|
391
|
+
|
|
392
|
+
<dt>color</dt>
|
|
393
|
+
<dd>Required</dd>
|
|
394
|
+
|
|
395
|
+
<dt>width</dt>
|
|
396
|
+
<dd>Optional</dd>
|
|
397
|
+
|
|
398
|
+
<dt>height</dt>
|
|
399
|
+
<dd>Optional</dd>
|
|
400
|
+
|
|
401
|
+
</dl>
|
|
402
|
+
<ul class='samples'>
|
|
403
|
+
|
|
404
|
+
<li>
|
|
405
|
+
<style>#shape_sample_triangle-topleft_1 {
|
|
406
|
+
width: 0;
|
|
407
|
+
height: 0;
|
|
408
|
+
border-top: 100px solid red;
|
|
409
|
+
border-right: 100px solid transparent; }
|
|
410
|
+
</style>
|
|
411
|
+
<style contenteditable>#shape {
|
|
412
|
+
@include triangle-topleft(red);
|
|
413
|
+
}</style>
|
|
414
|
+
<div id='shape_sample_triangle-topleft_1' class='shape triangle-topleft'></div>
|
|
415
|
+
</li>
|
|
416
|
+
|
|
417
|
+
</ul>
|
|
418
|
+
</section>
|
|
419
|
+
|
|
420
|
+
<section class='triangle-topright'>
|
|
421
|
+
<header><h1>triangle-topright</h1></header>
|
|
422
|
+
<dl>
|
|
423
|
+
|
|
424
|
+
<dt>color</dt>
|
|
425
|
+
<dd>Required</dd>
|
|
426
|
+
|
|
427
|
+
<dt>width</dt>
|
|
428
|
+
<dd>Optional</dd>
|
|
429
|
+
|
|
430
|
+
<dt>height</dt>
|
|
431
|
+
<dd>Optional</dd>
|
|
432
|
+
|
|
433
|
+
</dl>
|
|
434
|
+
<ul class='samples'>
|
|
435
|
+
|
|
436
|
+
<li>
|
|
437
|
+
<style>#shape_sample_triangle-topright_1 {
|
|
438
|
+
width: 0;
|
|
439
|
+
height: 0;
|
|
440
|
+
border-top: 100px solid red;
|
|
441
|
+
border-left: 100px solid transparent; }
|
|
442
|
+
</style>
|
|
443
|
+
<style contenteditable>#shape {
|
|
444
|
+
@include triangle-topright(red);
|
|
445
|
+
}</style>
|
|
446
|
+
<div id='shape_sample_triangle-topright_1' class='shape triangle-topright'></div>
|
|
447
|
+
</li>
|
|
448
|
+
|
|
449
|
+
</ul>
|
|
450
|
+
</section>
|
|
451
|
+
|
|
452
|
+
<section class='triangle-bottomleft'>
|
|
453
|
+
<header><h1>triangle-bottomleft</h1></header>
|
|
454
|
+
<dl>
|
|
455
|
+
|
|
456
|
+
<dt>color</dt>
|
|
457
|
+
<dd>Required</dd>
|
|
458
|
+
|
|
459
|
+
<dt>width</dt>
|
|
460
|
+
<dd>Optional</dd>
|
|
461
|
+
|
|
462
|
+
<dt>height</dt>
|
|
463
|
+
<dd>Optional</dd>
|
|
464
|
+
|
|
465
|
+
</dl>
|
|
466
|
+
<ul class='samples'>
|
|
467
|
+
|
|
468
|
+
<li>
|
|
469
|
+
<style>#shape_sample_triangle-bottomleft_1 {
|
|
470
|
+
width: 0;
|
|
471
|
+
height: 0;
|
|
472
|
+
border-bottom: 100px solid red;
|
|
473
|
+
border-right: 100px solid transparent; }
|
|
474
|
+
</style>
|
|
475
|
+
<style contenteditable>#shape {
|
|
476
|
+
@include triangle-bottomleft(red);
|
|
477
|
+
}</style>
|
|
478
|
+
<div id='shape_sample_triangle-bottomleft_1' class='shape triangle-bottomleft'></div>
|
|
479
|
+
</li>
|
|
480
|
+
|
|
481
|
+
</ul>
|
|
482
|
+
</section>
|
|
483
|
+
|
|
484
|
+
<section class='triangle-bottomright'>
|
|
485
|
+
<header><h1>triangle-bottomright</h1></header>
|
|
486
|
+
<dl>
|
|
487
|
+
|
|
488
|
+
<dt>color</dt>
|
|
489
|
+
<dd>Required</dd>
|
|
490
|
+
|
|
491
|
+
<dt>width</dt>
|
|
492
|
+
<dd>Optional</dd>
|
|
493
|
+
|
|
494
|
+
<dt>height</dt>
|
|
495
|
+
<dd>Optional</dd>
|
|
496
|
+
|
|
497
|
+
</dl>
|
|
498
|
+
<ul class='samples'>
|
|
499
|
+
|
|
500
|
+
<li>
|
|
501
|
+
<style>#shape_sample_triangle-bottomright_1 {
|
|
502
|
+
width: 0;
|
|
503
|
+
height: 0;
|
|
504
|
+
border-bottom: 100px solid red;
|
|
505
|
+
border-left: 100px solid transparent; }
|
|
506
|
+
</style>
|
|
507
|
+
<style contenteditable>#shape {
|
|
508
|
+
@include triangle-bottomright(red);
|
|
509
|
+
}</style>
|
|
510
|
+
<div id='shape_sample_triangle-bottomright_1' class='shape triangle-bottomright'></div>
|
|
511
|
+
</li>
|
|
512
|
+
|
|
513
|
+
</ul>
|
|
514
|
+
</section>
|
|
515
|
+
|
|
516
|
+
<section class='parallelogram'>
|
|
517
|
+
<header><h1>parallelogram</h1></header>
|
|
518
|
+
<dl>
|
|
519
|
+
|
|
520
|
+
<dt>color</dt>
|
|
521
|
+
<dd>Required</dd>
|
|
522
|
+
|
|
523
|
+
<dt>width</dt>
|
|
524
|
+
<dd>Optional</dd>
|
|
525
|
+
|
|
526
|
+
<dt>height</dt>
|
|
527
|
+
<dd>Optional</dd>
|
|
528
|
+
|
|
529
|
+
<dt>angle</dt>
|
|
530
|
+
<dd>Optional</dd>
|
|
531
|
+
|
|
532
|
+
</dl>
|
|
533
|
+
<ul class='samples'>
|
|
534
|
+
|
|
535
|
+
<li>
|
|
536
|
+
<style>#shape_sample_parallelogram_1 {
|
|
537
|
+
width: 150px;
|
|
538
|
+
height: 100px;
|
|
539
|
+
-webkit-transform: skew(20deg);
|
|
540
|
+
-moz-transform: skew(20deg);
|
|
541
|
+
-o-transform: skew(20deg);
|
|
542
|
+
background: red; }
|
|
543
|
+
</style>
|
|
544
|
+
<style contenteditable>#shape {
|
|
545
|
+
@include parallelogram(red);
|
|
546
|
+
}</style>
|
|
547
|
+
<div id='shape_sample_parallelogram_1' class='shape parallelogram'></div>
|
|
548
|
+
</li>
|
|
549
|
+
|
|
550
|
+
<li>
|
|
551
|
+
<style>#shape_sample_parallelogram_2 {
|
|
552
|
+
width: 40px;
|
|
553
|
+
height: 120px;
|
|
554
|
+
-webkit-transform: skew(40deg);
|
|
555
|
+
-moz-transform: skew(40deg);
|
|
556
|
+
-o-transform: skew(40deg);
|
|
557
|
+
background: #fab444; }
|
|
558
|
+
</style>
|
|
559
|
+
<style contenteditable>#shape {
|
|
560
|
+
@include parallelogram(#fab444, 40px, 120px, 40deg);
|
|
561
|
+
}</style>
|
|
562
|
+
<div id='shape_sample_parallelogram_2' class='shape parallelogram'></div>
|
|
563
|
+
</li>
|
|
564
|
+
|
|
565
|
+
</ul>
|
|
566
|
+
</section>
|
|
567
|
+
|
|
568
|
+
<section class='trapezoid'>
|
|
569
|
+
<header><h1>trapezoid</h1></header>
|
|
570
|
+
<dl>
|
|
571
|
+
|
|
572
|
+
<dt>color</dt>
|
|
573
|
+
<dd>Required</dd>
|
|
574
|
+
|
|
575
|
+
<dt>width</dt>
|
|
576
|
+
<dd>Optional</dd>
|
|
577
|
+
|
|
578
|
+
<dt>height</dt>
|
|
579
|
+
<dd>Optional</dd>
|
|
580
|
+
|
|
581
|
+
</dl>
|
|
582
|
+
<ul class='samples'>
|
|
583
|
+
|
|
584
|
+
<li>
|
|
585
|
+
<style>#shape_sample_trapezoid_1 {
|
|
586
|
+
border-bottom: 100px solid red;
|
|
587
|
+
/* TODO: Support custom angle */
|
|
588
|
+
border-left: 50px solid transparent;
|
|
589
|
+
border-right: 50px solid transparent;
|
|
590
|
+
height: 0;
|
|
591
|
+
width: 100px; }
|
|
592
|
+
</style>
|
|
593
|
+
<style contenteditable>#shape {
|
|
594
|
+
@include trapezoid(red);
|
|
595
|
+
}</style>
|
|
596
|
+
<div id='shape_sample_trapezoid_1' class='shape trapezoid'></div>
|
|
597
|
+
</li>
|
|
598
|
+
|
|
599
|
+
</ul>
|
|
600
|
+
</section>
|
|
601
|
+
|
|
602
|
+
<section class='star-six'>
|
|
603
|
+
<header><h1>star-six</h1></header>
|
|
604
|
+
<dl>
|
|
605
|
+
|
|
606
|
+
<dt>color</dt>
|
|
607
|
+
<dd>Required</dd>
|
|
608
|
+
|
|
609
|
+
<dt>diameter</dt>
|
|
610
|
+
<dd>Optional</dd>
|
|
611
|
+
|
|
612
|
+
</dl>
|
|
613
|
+
<ul class='samples'>
|
|
614
|
+
|
|
615
|
+
<li>
|
|
616
|
+
<style>#shape_sample_star-six_1 {
|
|
617
|
+
width: 0;
|
|
618
|
+
height: 0;
|
|
619
|
+
border-left: 50px solid transparent;
|
|
620
|
+
border-right: 50px solid transparent;
|
|
621
|
+
border-bottom: 100px solid red;
|
|
622
|
+
position: relative; }
|
|
623
|
+
#shape_sample_star-six_1:after {
|
|
624
|
+
width: 0;
|
|
625
|
+
height: 0;
|
|
626
|
+
border-left: 50px solid transparent;
|
|
627
|
+
border-right: 50px solid transparent;
|
|
628
|
+
border-top: 100px solid red;
|
|
629
|
+
position: absolute;
|
|
630
|
+
content: "";
|
|
631
|
+
top: 30px;
|
|
632
|
+
left: -50px; }
|
|
633
|
+
</style>
|
|
634
|
+
<style contenteditable>#shape {
|
|
635
|
+
@include star-six(red);
|
|
636
|
+
}</style>
|
|
637
|
+
<div id='shape_sample_star-six_1' class='shape star-six'></div>
|
|
638
|
+
</li>
|
|
639
|
+
|
|
640
|
+
</ul>
|
|
641
|
+
</section>
|
|
642
|
+
|
|
643
|
+
<section class='star-five'>
|
|
644
|
+
<header><h1>star-five</h1></header>
|
|
645
|
+
<dl>
|
|
646
|
+
|
|
647
|
+
<dt>color</dt>
|
|
648
|
+
<dd>Required</dd>
|
|
649
|
+
|
|
650
|
+
<dt>radius</dt>
|
|
651
|
+
<dd>Optional</dd>
|
|
652
|
+
|
|
653
|
+
</dl>
|
|
654
|
+
<ul class='samples'>
|
|
655
|
+
|
|
656
|
+
<li>
|
|
657
|
+
<style>#shape_sample_star-five_1 {
|
|
658
|
+
margin: 50px 0;
|
|
659
|
+
position: relative;
|
|
660
|
+
display: block;
|
|
661
|
+
color: red;
|
|
662
|
+
width: 0px;
|
|
663
|
+
height: 0px;
|
|
664
|
+
border-right: 100px solid transparent;
|
|
665
|
+
border-bottom: 70px solid red;
|
|
666
|
+
border-left: 100px solid transparent;
|
|
667
|
+
-moz-transform: rotate(35deg);
|
|
668
|
+
-webkit-transform: rotate(35deg);
|
|
669
|
+
-ms-transform: rotate(35deg);
|
|
670
|
+
-o-transform: rotate(35deg); }
|
|
671
|
+
#shape_sample_star-five_1:before {
|
|
672
|
+
border-bottom: 80px solid red;
|
|
673
|
+
border-left: 30px solid transparent;
|
|
674
|
+
border-right: 30px solid transparent;
|
|
675
|
+
position: absolute;
|
|
676
|
+
height: 0;
|
|
677
|
+
width: 0;
|
|
678
|
+
top: -45px;
|
|
679
|
+
left: -65px;
|
|
680
|
+
display: block;
|
|
681
|
+
content: '';
|
|
682
|
+
-webkit-transform: rotate(-35deg);
|
|
683
|
+
-moz-transform: rotate(-35deg);
|
|
684
|
+
-ms-transform: rotate(-35deg);
|
|
685
|
+
-o-transform: rotate(-35deg); }
|
|
686
|
+
#shape_sample_star-five_1:after {
|
|
687
|
+
position: absolute;
|
|
688
|
+
display: block;
|
|
689
|
+
color: red;
|
|
690
|
+
top: 3px;
|
|
691
|
+
left: -105px;
|
|
692
|
+
width: 0px;
|
|
693
|
+
height: 0px;
|
|
694
|
+
border-right: 100px solid transparent;
|
|
695
|
+
border-bottom: 70px solid red;
|
|
696
|
+
border-left: 100px solid transparent;
|
|
697
|
+
-webkit-transform: rotate(-70deg);
|
|
698
|
+
-moz-transform: rotate(-70deg);
|
|
699
|
+
-ms-transform: rotate(-70deg);
|
|
700
|
+
-o-transform: rotate(-70deg);
|
|
701
|
+
content: ''; }
|
|
702
|
+
</style>
|
|
703
|
+
<style contenteditable>#shape {
|
|
704
|
+
@include star-five(red);
|
|
705
|
+
}</style>
|
|
706
|
+
<div id='shape_sample_star-five_1' class='shape star-five'></div>
|
|
707
|
+
</li>
|
|
708
|
+
|
|
709
|
+
<li>
|
|
710
|
+
<style>#shape_sample_star-five_2 {
|
|
711
|
+
margin: 20px 0;
|
|
712
|
+
position: relative;
|
|
713
|
+
display: block;
|
|
714
|
+
color: black;
|
|
715
|
+
width: 0px;
|
|
716
|
+
height: 0px;
|
|
717
|
+
border-right: 40px solid transparent;
|
|
718
|
+
border-bottom: 28px solid black;
|
|
719
|
+
border-left: 40px solid transparent;
|
|
720
|
+
-moz-transform: rotate(35deg);
|
|
721
|
+
-webkit-transform: rotate(35deg);
|
|
722
|
+
-ms-transform: rotate(35deg);
|
|
723
|
+
-o-transform: rotate(35deg); }
|
|
724
|
+
#shape_sample_star-five_2:before {
|
|
725
|
+
border-bottom: 32px solid black;
|
|
726
|
+
border-left: 12px solid transparent;
|
|
727
|
+
border-right: 12px solid transparent;
|
|
728
|
+
position: absolute;
|
|
729
|
+
height: 0;
|
|
730
|
+
width: 0;
|
|
731
|
+
top: -18px;
|
|
732
|
+
left: -26px;
|
|
733
|
+
display: block;
|
|
734
|
+
content: '';
|
|
735
|
+
-webkit-transform: rotate(-35deg);
|
|
736
|
+
-moz-transform: rotate(-35deg);
|
|
737
|
+
-ms-transform: rotate(-35deg);
|
|
738
|
+
-o-transform: rotate(-35deg); }
|
|
739
|
+
#shape_sample_star-five_2:after {
|
|
740
|
+
position: absolute;
|
|
741
|
+
display: block;
|
|
742
|
+
color: black;
|
|
743
|
+
top: 1.2px;
|
|
744
|
+
left: -42px;
|
|
745
|
+
width: 0px;
|
|
746
|
+
height: 0px;
|
|
747
|
+
border-right: 40px solid transparent;
|
|
748
|
+
border-bottom: 28px solid black;
|
|
749
|
+
border-left: 40px solid transparent;
|
|
750
|
+
-webkit-transform: rotate(-70deg);
|
|
751
|
+
-moz-transform: rotate(-70deg);
|
|
752
|
+
-ms-transform: rotate(-70deg);
|
|
753
|
+
-o-transform: rotate(-70deg);
|
|
754
|
+
content: ''; }
|
|
755
|
+
</style>
|
|
756
|
+
<style contenteditable>#shape {
|
|
757
|
+
@include star-five(#000, 40px);
|
|
758
|
+
}</style>
|
|
759
|
+
<div id='shape_sample_star-five_2' class='shape star-five'></div>
|
|
760
|
+
</li>
|
|
761
|
+
|
|
762
|
+
</ul>
|
|
763
|
+
</section>
|
|
764
|
+
|
|
765
|
+
<section class='pentagon'>
|
|
766
|
+
<header><h1>pentagon</h1></header>
|
|
767
|
+
<dl>
|
|
768
|
+
|
|
769
|
+
<dt>color</dt>
|
|
770
|
+
<dd>Required</dd>
|
|
771
|
+
|
|
772
|
+
<dt>diameter</dt>
|
|
773
|
+
<dd>Optional</dd>
|
|
774
|
+
|
|
775
|
+
</dl>
|
|
776
|
+
<ul class='samples'>
|
|
777
|
+
|
|
778
|
+
<li>
|
|
779
|
+
<style>#shape_sample_pentagon_1 {
|
|
780
|
+
position: relative;
|
|
781
|
+
width: 54px;
|
|
782
|
+
border-width: 50px 18px 0;
|
|
783
|
+
border-style: solid;
|
|
784
|
+
border-color: red transparent; }
|
|
785
|
+
#shape_sample_pentagon_1:before {
|
|
786
|
+
content: "";
|
|
787
|
+
position: absolute;
|
|
788
|
+
height: 0;
|
|
789
|
+
width: 0;
|
|
790
|
+
top: -85px;
|
|
791
|
+
left: -18px;
|
|
792
|
+
border-width: 0 45px 35px;
|
|
793
|
+
border-style: solid;
|
|
794
|
+
border-color: transparent transparent red; }
|
|
795
|
+
</style>
|
|
796
|
+
<style contenteditable>#shape {
|
|
797
|
+
@include pentagon(red);
|
|
798
|
+
}</style>
|
|
799
|
+
<div id='shape_sample_pentagon_1' class='shape pentagon'></div>
|
|
800
|
+
</li>
|
|
801
|
+
|
|
802
|
+
<li>
|
|
803
|
+
<style>#shape_sample_pentagon_2 {
|
|
804
|
+
position: relative;
|
|
805
|
+
width: 47.52px;
|
|
806
|
+
border-width: 44px 15.84px 0;
|
|
807
|
+
border-style: solid;
|
|
808
|
+
border-color: lime transparent; }
|
|
809
|
+
#shape_sample_pentagon_2:before {
|
|
810
|
+
content: "";
|
|
811
|
+
position: absolute;
|
|
812
|
+
height: 0;
|
|
813
|
+
width: 0;
|
|
814
|
+
top: -74.8px;
|
|
815
|
+
left: -15.84px;
|
|
816
|
+
border-width: 0 39.6px 30.8px;
|
|
817
|
+
border-style: solid;
|
|
818
|
+
border-color: transparent transparent lime; }
|
|
819
|
+
</style>
|
|
820
|
+
<style contenteditable>#shape {
|
|
821
|
+
@include pentagon(#0f0, 88px);
|
|
822
|
+
}</style>
|
|
823
|
+
<div id='shape_sample_pentagon_2' class='shape pentagon'></div>
|
|
824
|
+
</li>
|
|
825
|
+
|
|
826
|
+
<li>
|
|
827
|
+
<style>#shape_sample_pentagon_3 {
|
|
828
|
+
position: relative;
|
|
829
|
+
width: 69.12px;
|
|
830
|
+
border-width: 64px 23.04px 0;
|
|
831
|
+
border-style: solid;
|
|
832
|
+
border-color: blue transparent; }
|
|
833
|
+
#shape_sample_pentagon_3:before {
|
|
834
|
+
content: "";
|
|
835
|
+
position: absolute;
|
|
836
|
+
height: 0;
|
|
837
|
+
width: 0;
|
|
838
|
+
top: -108.8px;
|
|
839
|
+
left: -23.04px;
|
|
840
|
+
border-width: 0 57.6px 44.8px;
|
|
841
|
+
border-style: solid;
|
|
842
|
+
border-color: transparent transparent blue; }
|
|
843
|
+
</style>
|
|
844
|
+
<style contenteditable>#shape {
|
|
845
|
+
@include pentagon(#00f, 128px);
|
|
846
|
+
}</style>
|
|
847
|
+
<div id='shape_sample_pentagon_3' class='shape pentagon'></div>
|
|
848
|
+
</li>
|
|
849
|
+
|
|
850
|
+
</ul>
|
|
851
|
+
</section>
|
|
852
|
+
|
|
853
|
+
<section class='hexagon'>
|
|
854
|
+
<header><h1>hexagon</h1></header>
|
|
855
|
+
<dl>
|
|
856
|
+
|
|
857
|
+
<dt>color</dt>
|
|
858
|
+
<dd>Required</dd>
|
|
859
|
+
|
|
860
|
+
<dt>diameter</dt>
|
|
861
|
+
<dd>Optional</dd>
|
|
862
|
+
|
|
863
|
+
</dl>
|
|
864
|
+
<ul class='samples'>
|
|
865
|
+
|
|
866
|
+
<li>
|
|
867
|
+
<style>#shape_sample_hexagon_1 {
|
|
868
|
+
width: 100px;
|
|
869
|
+
height: 55.0px;
|
|
870
|
+
background: red;
|
|
871
|
+
position: relative; }
|
|
872
|
+
#shape_sample_hexagon_1:before {
|
|
873
|
+
content: "";
|
|
874
|
+
position: absolute;
|
|
875
|
+
top: -25px;
|
|
876
|
+
left: 0;
|
|
877
|
+
width: 0;
|
|
878
|
+
height: 0;
|
|
879
|
+
border-left: 50px solid transparent;
|
|
880
|
+
border-right: 50px solid transparent;
|
|
881
|
+
border-bottom: 25px solid red; }
|
|
882
|
+
#shape_sample_hexagon_1:after {
|
|
883
|
+
content: "";
|
|
884
|
+
position: absolute;
|
|
885
|
+
bottom: -25px;
|
|
886
|
+
left: 0;
|
|
887
|
+
width: 0;
|
|
888
|
+
height: 0;
|
|
889
|
+
border-left: 50px solid transparent;
|
|
890
|
+
border-right: 50px solid transparent;
|
|
891
|
+
border-top: 25px solid red; }
|
|
892
|
+
</style>
|
|
893
|
+
<style contenteditable>#shape {
|
|
894
|
+
@include hexagon(red);
|
|
895
|
+
}</style>
|
|
896
|
+
<div id='shape_sample_hexagon_1' class='shape hexagon'></div>
|
|
897
|
+
</li>
|
|
898
|
+
|
|
899
|
+
</ul>
|
|
900
|
+
</section>
|
|
901
|
+
|
|
902
|
+
<section class='octagon'>
|
|
903
|
+
<header><h1>octagon</h1></header>
|
|
904
|
+
<dl>
|
|
905
|
+
|
|
906
|
+
<dt>color</dt>
|
|
907
|
+
<dd>Required</dd>
|
|
908
|
+
|
|
909
|
+
<dt>background</dt>
|
|
910
|
+
<dd>Required</dd>
|
|
911
|
+
|
|
912
|
+
<dt>diameter</dt>
|
|
913
|
+
<dd>Optional</dd>
|
|
914
|
+
|
|
915
|
+
</dl>
|
|
916
|
+
<ul class='samples'>
|
|
917
|
+
|
|
918
|
+
<li>
|
|
919
|
+
<style>#shape_sample_octagon_1 {
|
|
920
|
+
width: 100px;
|
|
921
|
+
height: 100px;
|
|
922
|
+
background: red;
|
|
923
|
+
position: relative; }
|
|
924
|
+
#shape_sample_octagon_1:before {
|
|
925
|
+
content: "";
|
|
926
|
+
position: absolute;
|
|
927
|
+
top: 0;
|
|
928
|
+
left: 0;
|
|
929
|
+
border-bottom: 29.0px solid red;
|
|
930
|
+
border-left: 29.0px solid white;
|
|
931
|
+
border-right: 29.0px solid white;
|
|
932
|
+
width: 42px;
|
|
933
|
+
height: 0; }
|
|
934
|
+
#shape_sample_octagon_1:after {
|
|
935
|
+
content: "";
|
|
936
|
+
position: absolute;
|
|
937
|
+
bottom: 0;
|
|
938
|
+
left: 0;
|
|
939
|
+
border-top: 29.0px solid red;
|
|
940
|
+
border-left: 29.0px solid white;
|
|
941
|
+
border-right: 29.0px solid white;
|
|
942
|
+
width: 42px;
|
|
943
|
+
height: 0; }
|
|
944
|
+
</style>
|
|
945
|
+
<style contenteditable>#shape {
|
|
946
|
+
@include octagon(red, #fff);
|
|
947
|
+
}</style>
|
|
948
|
+
<div id='shape_sample_octagon_1' class='shape octagon'></div>
|
|
949
|
+
</li>
|
|
950
|
+
|
|
951
|
+
</ul>
|
|
952
|
+
</section>
|
|
953
|
+
|
|
954
|
+
<section class='heart'>
|
|
955
|
+
<header><h1>heart</h1></header>
|
|
956
|
+
<dl>
|
|
957
|
+
|
|
958
|
+
<dt>color</dt>
|
|
959
|
+
<dd>Required</dd>
|
|
960
|
+
|
|
961
|
+
<dt>width</dt>
|
|
962
|
+
<dd>Optional</dd>
|
|
963
|
+
|
|
964
|
+
<dt>height</dt>
|
|
965
|
+
<dd>Optional</dd>
|
|
966
|
+
|
|
967
|
+
</dl>
|
|
968
|
+
<ul class='samples'>
|
|
969
|
+
|
|
970
|
+
<li>
|
|
971
|
+
<style>#shape_sample_heart_1 {
|
|
972
|
+
position: relative;
|
|
973
|
+
width: 100px;
|
|
974
|
+
height: 90px; }
|
|
975
|
+
#shape_sample_heart_1:after, #shape_sample_heart_1:before {
|
|
976
|
+
position: absolute;
|
|
977
|
+
content: "";
|
|
978
|
+
left: 50px;
|
|
979
|
+
top: 0;
|
|
980
|
+
width: 50px;
|
|
981
|
+
height: 79.2px;
|
|
982
|
+
background: red;
|
|
983
|
+
-moz-border-radius: 50px 50px 0 0;
|
|
984
|
+
border-radius: 50px 50px 0 0;
|
|
985
|
+
-webkit-transform: rotate(-45deg);
|
|
986
|
+
-moz-transform: rotate(-45deg);
|
|
987
|
+
-ms-transform: rotate(-45deg);
|
|
988
|
+
-o-transform: rotate(-45deg);
|
|
989
|
+
transform: rotate(-45deg);
|
|
990
|
+
-webkit-transform-origin: 0 100%;
|
|
991
|
+
-moz-transform-origin: 0 100%;
|
|
992
|
+
-ms-transform-origin: 0 100%;
|
|
993
|
+
-o-transform-origin: 0 100%;
|
|
994
|
+
transform-origin: 0 100%; }
|
|
995
|
+
#shape_sample_heart_1:after {
|
|
996
|
+
left: 0;
|
|
997
|
+
-webkit-transform: rotate(45deg);
|
|
998
|
+
-moz-transform: rotate(45deg);
|
|
999
|
+
-ms-transform: rotate(45deg);
|
|
1000
|
+
-o-transform: rotate(45deg);
|
|
1001
|
+
transform: rotate(45deg);
|
|
1002
|
+
-webkit-transform-origin: 100% 100%;
|
|
1003
|
+
-moz-transform-origin: 100% 100%;
|
|
1004
|
+
-ms-transform-origin: 100% 100%;
|
|
1005
|
+
-o-transform-origin: 100% 100%;
|
|
1006
|
+
transform-origin: 100% 100%; }
|
|
1007
|
+
</style>
|
|
1008
|
+
<style contenteditable>#shape {
|
|
1009
|
+
@include heart(red);
|
|
1010
|
+
}</style>
|
|
1011
|
+
<div id='shape_sample_heart_1' class='shape heart'></div>
|
|
1012
|
+
</li>
|
|
1013
|
+
|
|
1014
|
+
</ul>
|
|
1015
|
+
</section>
|
|
1016
|
+
|
|
1017
|
+
<section class='infinity'>
|
|
1018
|
+
<header><h1>infinity</h1></header>
|
|
1019
|
+
<dl>
|
|
1020
|
+
|
|
1021
|
+
<dt>color</dt>
|
|
1022
|
+
<dd>Required</dd>
|
|
1023
|
+
|
|
1024
|
+
<dt>width</dt>
|
|
1025
|
+
<dd>Optional</dd>
|
|
1026
|
+
|
|
1027
|
+
<dt>height</dt>
|
|
1028
|
+
<dd>Optional</dd>
|
|
1029
|
+
|
|
1030
|
+
<dt>thickness</dt>
|
|
1031
|
+
<dd>Optional</dd>
|
|
1032
|
+
|
|
1033
|
+
</dl>
|
|
1034
|
+
<ul class='samples'>
|
|
1035
|
+
|
|
1036
|
+
<li>
|
|
1037
|
+
<style>#shape_sample_infinity_1 {
|
|
1038
|
+
position: relative;
|
|
1039
|
+
width: 212px;
|
|
1040
|
+
height: 100px; }
|
|
1041
|
+
#shape_sample_infinity_1:before, #shape_sample_infinity_1:after {
|
|
1042
|
+
content: "";
|
|
1043
|
+
position: absolute;
|
|
1044
|
+
top: 0;
|
|
1045
|
+
left: 0px;
|
|
1046
|
+
/* Total BS guess at default size */
|
|
1047
|
+
width: 60px;
|
|
1048
|
+
height: 60px;
|
|
1049
|
+
border: 20px solid red;
|
|
1050
|
+
-moz-border-radius: 50px 50px 0 50px;
|
|
1051
|
+
border-radius: 50px 50px 0 50px;
|
|
1052
|
+
-webkit-transform: rotate(-45deg);
|
|
1053
|
+
-moz-transform: rotate(-45deg);
|
|
1054
|
+
-ms-transform: rotate(-45deg);
|
|
1055
|
+
-o-transform: rotate(-45deg);
|
|
1056
|
+
transform: rotate(-45deg); }
|
|
1057
|
+
#shape_sample_infinity_1:after {
|
|
1058
|
+
left: auto;
|
|
1059
|
+
right: 0;
|
|
1060
|
+
-moz-border-radius: 50px 50px 50px 0;
|
|
1061
|
+
border-radius: 50px 50px 50px 0;
|
|
1062
|
+
-webkit-transform: rotate(45deg);
|
|
1063
|
+
-moz-transform: rotate(45deg);
|
|
1064
|
+
-ms-transform: rotate(45deg);
|
|
1065
|
+
-o-transform: rotate(45deg);
|
|
1066
|
+
transform: rotate(45deg); }
|
|
1067
|
+
</style>
|
|
1068
|
+
<style contenteditable>#shape {
|
|
1069
|
+
@include infinity(red);
|
|
1070
|
+
}</style>
|
|
1071
|
+
<div id='shape_sample_infinity_1' class='shape infinity'></div>
|
|
1072
|
+
</li>
|
|
1073
|
+
|
|
1074
|
+
</ul>
|
|
1075
|
+
</section>
|
|
1076
|
+
|
|
1077
|
+
</div>
|
|
1078
|
+
</body>
|
|
1079
|
+
</html>
|