HTML CSS examples for CSS Widget:Shape
Make half a hexagon shape with a border over a rectangle with an image
<html lang="en"> <head> <title>Lorem ipsum dolor sit amet, con</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> div {<!-- w w w . ja v a2s . c o m--> text-align:center; padding:0.6em; background:linear-gradient(to bottom, gray 51%, white 51%, white 53%, black 53%); } img { position:relative; display:block; margin:0.6em 0; z-index:2; border-radius:100%; box-shadow:0 0 6px, 0 0 9px white; } span { text-align:center; display:inline-block; padding:0 4em; position:relative; overflow:hidden; background:linear-gradient(to left, white, white) bottom center, linear-gradient(41deg, transparent 2.5em, white, 2.5em, white 2.6em, gray 2.6em)bottom left, linear-gradient(-41deg, transparent 2.5em, white, 2.5em, white 2.6em, gray 2.6em)bottom right; background-repeat:no-repeat; background-size:51% 3px, 51% 100%, 51% 100%; } </style> </head> <body translate="no"> <div> <span> <img src="https://www.java2s.com/style/demo/InternetExplorer.png" alt="ico"> </span> </div> </body> </html>