Permalink
Browse files

Two new shapes via Alan Johnson

  • Loading branch information...
1 parent 3253f68 commit 2fe296222a7a33bf9904f7a736e283cdc3dae7ae @chriscoyier chriscoyier committed Jun 28, 2011
Showing with 79 additions and 1 deletion.
  1. +79 −1 index.html
View
@@ -319,6 +319,85 @@ <h2>Star (5-points) <a href="http://kitmacallister.com/2011/css-only-5-point-sta
</div>
+ <div class="shape">
+
+ <h2>Star (8-points) <a href="http://commondream.net/">via Alan Johnson</a></h2>
+
+ <div id="star-eight"></div>
+
+ <style contenteditable>
+#star-eight {
+ width: 80px;
+ height: 80px;
+ position: relative;
+}
+#star-eight:before, #star-eight:after {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 80px;
+ width: 80px;
+ background: red;
+}
+#star-eight:before {
+ -webkit-transform: rotate(22.5deg);
+ -moz-transform: rotate(22.5deg);
+ -ms-transform: rotate(22.5deg);
+ -o-transform: rotate(22.5deg);
+ transform: rotate(22.5deg);
+}
+#star-eight:after {
+ -webkit-transform: rotate(67.5deg);
+ -moz-transform: rotate(67.5deg);
+ -ms-transform: rotate(67.5deg);
+ -o-transform: rotate(67.5deg);
+ transform: rotate(67.5deg);
+}
+ </style>
+
+ </div>
+
+ <div class="shape">
+
+ <h2>Burst (12-points) <a href="http://commondream.net/">via Alan Johnson</a></h2>
+
+ <div id="burst"></div>
+
+ <style contenteditable>
+#burst {
+ background: red;
+ width: 80px;
+ height: 80px;
+ position: relative;
+}
+#burst:before, #burst:after {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 80px;
+ width: 80px;
+ background: red;
+}
+#burst:before {
+ -webkit-transform: rotate(30deg);
+ -moz-transform: rotate(30deg);
+ -ms-transform: rotate(30deg);
+ -o-transform: rotate(30deg);
+ transform: rotate(30deg);
+}
+#burst:after {
+ -webkit-transform: rotate(60deg);
+ -moz-transform: rotate(60deg);
+ -ms-transform: rotate(60deg);
+ -o-transform: rotate(60deg);
+ transform: rotate(60deg);
+}
+ </style>
+
+ </div>
+
<div class="shape">
<h2>Pentagon</h2>
@@ -524,7 +603,6 @@ <h2>Infinity <a href="http://nicolasgallagher.com/">via Nicolas Gallagher</a></h
</style>
</div>
-
</div>

0 comments on commit 2fe2962

Please sign in to comment.