Edit Question - KnowledgeHub

Title Body

Is there a chance to place an image inside a hexagon shape? I'm used to hexagonal shaped cells in html , but I could'nt get it filled with an (background?) image. Here is what I have tried : .top { height: 0; width: 0; display: block; border: 20px solid red; border-top-color: transparent; border-right-color: transparent; border-bottom-color: red; border-left-color: transparent; } .middle { height: 20px; background: red; width: 40px; display: block; } .bottom { height: 0; width: 0; display: block; border: 20px solid red; border-top-color: red; border-right-color: transparent; border-bottom-color: transparent; border-left-color: transparent; } <div class="hexagon pic"> <span class="top" style="background: url(http://placekitten.com/400/400/)"></span> <span class="middle" style="background: url(http://placekitten.com/400/400/)"></span> <span class="bottom" style="background: url(http://placekitten.com/400/400/)"></span> </div> <div class="hexagon"> <span class="top" style="overflow: hidden;"><img src="http://placekitten.com/400/400/" /></span> <span class="middle" style="overflow: hidden;"><img src="http://placekitten.com/400/400/" /></span> <span class="bottom" style="overflow: hidden;"><img src="http://placekitten.com/400/400/" /></span> </div> <div class="hexagon"> <span class="top"><img src="http://placekitten.com/400/400/" /></span> <

Tags (comma-separated) Cancel