├── README.markdown ├── css └── style.css └── index.html /README.markdown: -------------------------------------------------------------------------------- 1 | ## You can make shapes with a single element. 2 | 3 | That's cool, and fairly practical. -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | body { 7 | font: 14px/1.4 Monaco, MonoSpace; 8 | } 9 | 10 | a { 11 | text-decoration: none; 12 | color: red; 13 | } 14 | a:hover, a:active { 15 | color: black; 16 | } 17 | 18 | style { 19 | display: block; 20 | white-space: pre; 21 | background: #333; 22 | color: white; 23 | font: 12px Monaco; 24 | padding: 0 15px; 25 | } 26 | 27 | #page-wrap { 28 | width: 560px; 29 | margin: 80px auto; 30 | padding: 50px; 31 | background: #eee; 32 | -webkit-border-radius: 20px; 33 | -moz-border-radius: 20px; 34 | border-radius: 20px; 35 | -webkit-box-shadow: 36 | inset 0 0 10px rgba(0,0,0, 0.3), 37 | 0 0 10px rgba(0,0,0,0.3); 38 | } 39 | 40 | h1 { 41 | font: bold italic 72px "atrament-web-1","atrament-web-2", Georgia, Serif; 42 | margin: 0 0 20px 0; } 43 | h2 { 44 | font: bold italic 30px "atrament-web-1","atrament-web-2", Georgia, Serif; 45 | } 46 | h1 > span { 47 | color: red; 48 | } 49 | 50 | .shape { 51 | padding: 20px; 52 | } 53 | .shape > div { 54 | margin: 20px 0; 55 | } 56 | .shape > h2 { 57 | background: rgba(0,0,0,0.15); 58 | padding: 10px; 59 | width: 640px; 60 | text-indent: 60px; 61 | margin: 50px 0 0 -70px; 62 | position: relative; 63 | } 64 | .shape > h2 > a { 65 | position: absolute; 66 | right: 20px; 67 | bottom: 10px; 68 | font-size: 20px; 69 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | The Shapes of CSS 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 |

The Shapes of CSS

17 | 18 |

All of the below use only a single HTML element. Any kind of CSS goes, 19 | as long as it's supported in at least one browser.

20 | 21 |
22 | 23 |
24 |

Square

25 |
26 | 33 | 34 |
35 | 36 |
37 |

Rectangle

38 |
39 | 46 | 47 | 48 |
49 | 50 |
51 |

Circle

52 |
53 | 63 | 64 |
65 | 66 |
67 |

Oval

68 |
69 | 79 | 80 |
81 | 82 | 83 |
84 |

Triangle Up

85 |
86 | 87 | 96 | 97 |
98 | 99 |
100 |

Triangle Down

101 |
102 | 111 |
112 | 113 |
114 |

Triangle Left

115 |
116 | 125 |
126 | 127 |
128 |

Triangle Right

129 |
130 | 139 |
140 | 141 | 142 |
143 |

Triangle Top Left

144 |
145 | 153 |
154 | 155 |
156 |

Triangle Top Right

157 |
158 | 167 |
168 | 169 |
170 |

Triangle Bottom Left

171 |
172 | 180 |
181 | 182 |
183 |

Triangle Bottom Right

184 |
185 | 193 |
194 | 195 |
196 | 197 |

Parallelogram

198 | 199 |
200 | 201 | 211 | 212 |
213 | 214 |
215 | 216 |

Trapezoid

217 | 218 |
219 | 220 | 229 | 230 |
231 | 232 |
233 | 234 |

Star (6-points)

235 | 236 |
237 | 238 | 259 | 260 |
261 | 262 |
263 | 264 |

Star (5-points) via Kit MacAllister

265 | 266 |
267 | 268 | 319 | 320 |
321 | 322 |
323 | 324 |

Star (8-points) via Alan Johnson

325 | 326 |
327 | 328 | 358 | 359 |
360 | 361 |
362 | 363 |

Burst (12-points) via Alan Johnson

364 | 365 |
366 | 367 | 398 | 399 |
400 | 401 |
402 | 403 |

Pentagon

404 | 405 |
406 | 407 | 427 | 428 |
429 | 430 |
431 | 432 |

Hexagon

433 | 434 |
435 | 436 | 466 | 467 |
468 | 469 |
470 | 471 |

Octagon

472 | 473 |
474 | 475 | 507 | 508 |
509 | 510 |
511 | 512 |

Heart via Nicolas Gallagher

513 | 514 |
515 | 516 | 558 | 559 |
560 | 561 |
562 | 563 |

Infinity via Nicolas Gallagher

564 | 565 |
566 | 567 | 604 | 605 |
606 |
607 | 608 |

Magnifying Glass

609 | 610 |
611 | 612 | 640 | 641 |
642 | 643 |
644 | 645 |
646 | 647 | 648 | 649 | --------------------------------------------------------------------------------