Skip to content

Instantly share code, notes, and snippets.

@sara-mansouri
Last active August 29, 2015 14:22
Show Gist options
  • Save sara-mansouri/27105eb91e20dc8361e2 to your computer and use it in GitHub Desktop.
Save sara-mansouri/27105eb91e20dc8361e2 to your computer and use it in GitHub Desktop.
hexaflexigon
<div class="photo">
<img class="poly one" src="https://teach.mozilla.org/img/pages/event-resources/resource-thumbnails-01.png"></img>
<img class="lozia one" src="https://teach.mozilla.org/img/pages/event-resources/resource-thumbnails-01.png"></img>
<img class="lozib one" src="https://teach.mozilla.org/img/pages/event-resources/resource-thumbnails-01.png"></img>
<img class="lozic one" src="https://teach.mozilla.org/img/pages/event-resources/resource-thumbnails-01.png"></img>
</div>
<div class="photo">
<img class="poly two" src="http://www2.psd100.com/ppp/2013/10/0501/mozilla-firefox-icon-1005140117.png"></img>
<img class="lozia two" src="http://www2.psd100.com/ppp/2013/10/0501/mozilla-firefox-icon-1005140117.png"></img>
<img class="lozib two" src="http://www2.psd100.com/ppp/2013/10/0501/mozilla-firefox-icon-1005140117.png"></img>
<img class="lozic two" src="http://www2.psd100.com/ppp/2013/10/0501/mozilla-firefox-icon-1005140117.png"></img>
</div>
<div class="photo">
<img class="poly three" src="https://teach.mozilla.org/img/pages/event-resources/resource-thumbnails-03@2x.png"></img>
<img class="lozia three" src="https://teach.mozilla.org/img/pages/event-resources/resource-thumbnails-03@2x.png"></img>
<img class="lozib three" src="https://teach.mozilla.org/img/pages/event-resources/resource-thumbnails-03@2x.png"></img>
<img class="lozic three" src="https://teach.mozilla.org/img/pages/event-resources/resource-thumbnails-03@2x.png"></img>
</div>
<!--next-->
<div class="photo" id="pattern">
<img id="lozi1a" class="lozia one" src="https://teach.mozilla.org/img/pages/event-resources/resource-thumbnails-01.png"></img>
<img id="lozi1b" class="lozib one" src="https://teach.mozilla.org/img/pages/event-resources/resource-thumbnails-01.png"></img>
<img id="lozi1c" class="lozic one" src="https://teach.mozilla.org/img/pages/event-resources/resource-thumbnails-01.png"></img>
<img id="lozi2a" class="lozia two" src="http://www2.psd100.com/ppp/2013/10/0501/mozilla-firefox-icon-1005140117.png"></img>
<img id="lozi2b" class="lozib two" src="http://www2.psd100.com/ppp/2013/10/0501/mozilla-firefox-icon-1005140117.png"></img>
<img id="lozi2c" class="lozic two" src="http://www2.psd100.com/ppp/2013/10/0501/mozilla-firefox-icon-1005140117.png"></img>
<img id="lozi3a" class="lozia three" src="https://teach.mozilla.org/img/pages/event-resources/resource-thumbnails-03@2x.png"></img>
<img id="lozi3b" class="lozib three" src="https://teach.mozilla.org/img/pages/event-resources/resource-thumbnails-03@2x.png"></img>
<img id="lozi3c" class="lozic three" src="https://teach.mozilla.org/img/pages/event-resources/resource-thumbnails-03@2x.png"></img>
</div>
*{float:left; }
.one{ background:aqua;}
.two{ background:bisque;}
.three{ background:antiquewhite;}
#pattern{ background-image: url(http://www.scientificamerican.com/sciam/cache/file/8C649A0C-74A0-460D-AF1C5E66C605563A.jpg);}
.photo{left:0px; width:100%;}
.poly{
width:200px;
height:173px;
-webkit-clip-path: polygon(75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%, 25% 0);
clip-path: polygon(75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%, 25% 0);
}
.lozic{
position:absolute;left:200px;
transform: rotate(-120deg);
-ms-transform: rotate(-120deg);
-moz-transform: rotate(-120deg);
-webkit-transform: rotate(-120deg);
-o-transform: rotate(-120deg);
width:200px;
height:173px;
-webkit-clip-path: polygon(25% 0, 50% 50%, 25% 100%, 0 50%);clip-path: polygon(25% 0, 50% 50%, 25% 100%, 0 50%);
}
.lozia{
position:absolute;left:400px;
transform: rotate(0deg);
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
width:200px;
height:173px;
-webkit-clip-path: polygon(100% 50%, 50% 50%, 25% 100%, 75% 100%);clip-path: polygon(100% 50%, 50% 50%, 25% 100%, 75% 100%);
}
.lozib{
position:absolute;left:600px;
transform: rotate(120deg);
-ms-transform: rotate(120deg);
-moz-transform: rotate(120deg);
-webkit-transform: rotate(120deg);
-o-transform: rotate(120deg);
width:200px;
height:173px;
-webkit-clip-path: polygon(100% 50%, 50% 50%, 25% 0, 75% 0);clip-path: polygon(100% 50%, 50% 50%, 25% 0, 75% 0);
}
#lozi3c{top:600px;left:100px;}
#lozi1c{top:600px;left:202px;}
#lozi2a{top:600px;left:304px;}
#lozi3b{top:600px;left:406px;}
#lozi1b{top:690px;left:48px;}
#lozi2c{top:690px;left:150px;}
#lozi3a{top:690px;left:252px;}
#lozi1a{top:690px;left:354px;}
#lozi2b{top:690px;left:456px;}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment