Make hexaflexigon with your own photos :)
A Pen by Sara Mansouri on CodePen.
Make hexaflexigon with your own photos :)
A Pen by Sara Mansouri on CodePen.
<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> |
A Pen by Sara Mansouri on CodePen.
*{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;} | |