User:Encredechine/hydra.css

.outer { display: inline-block; position: relative; width: 150px; height: 150px; background: #202020; box-sizing: border-box; -webkit-clip-path: polygon(90% 0, 100% 10%, 100% 100%, 10% 100%, 0 90%, 0 0); clip-path: polygon(90% 0, 100% 10%, 100% 100%, 10% 100%, 0 90%, 0 0); padding-left:3px; padding-top:3px; vertical-align:center; }

.outer2 { display: inline-block; position: relative; width: 145px; height: 145px; background: white; box-sizing: border-box; -webkit-clip-path: polygon(90% 0, 100% 10%, 100% 100%, 10% 100%, 0 90%, 0 0); clip-path: polygon(90% 0, 100% 10%, 100% 100%, 10% 100%, 0 90%, 0 0); padding-left:2px; padding-top:2px; vertical-align:center; }

.poli { display: inline-block; position: relative; width: 140px; height: 140px; background: #202020; box-sizing: border-box; -webkit-clip-path: polygon(90% 0, 100% 10%, 100% 100%, 10% 100%, 0 90%, 0 0); clip-path: polygon(90% 0, 100% 10%, 100% 100%, 10% 100%, 0 90%, 0 0); }

.poli img { display: inline-block; position: relative; width: 135px; height: 135px; background: white; box-sizing: border-box; -webkit-clip-path: polygon(90% 0, 100% 10%, 100% 100%, 10% 100%, 0 90%, 0 0); clip-path: polygon(90% 0, 100% 10%, 100% 100%, 10% 100%, 0 90%, 0 0); top:2px; left:2px; }