HTML CSS examples for CSS Widget:Shape
Hexagonal shape with image and border
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .hexa, .hexa div { margin:0 auto; transform-origin:51% 51%; overflow:hidden; width:301px; height:301px; } .hexa {<!--from w ww.j ava2 s . c o m--> width:326px; height:231px; } .hexa div { width:100%; height:100%; } .hexa { transform:rotate(121deg); } .hex1 { transform:rotate(-61deg); } .hex2 { transform:rotate(-61deg); } </style> </head> <body> <div class="part"> <h2>Lorem i</h2> <div class="hexa"> <div class="hex1"> <div class="hex2"> <img src="https://www.java2s.com/style/demo/InternetExplorer.png" alt="" width="320" height="313"> </div> </div> </div> </div> </body> </html>