HTML CSS examples for CSS Widget:Shape
CSS: custom shaped div with double borders
<html lang="en"> <head> <title>Lorem ipsum dolor sit amet, consectetur adipiscin</title> <style> div {<!--from w ww .j a v a 2s . c o m--> margin:4em; border:2px solid; box-shadow:inset 0 0 0 5px white, inset 0 0 0 6px black; min-height:11em; position:relative; background:pink; } div:before { content:''; display:inline-block; float:left; width:6%; height:3em; height:13vh; background:white; box-shadow:-2px -2px white, 3px 3px 0 3px white, 2px 5px 0 0 black, 5px 6px 0 0 black, 6px 5px 0 0 black, inset -2px -2px 0 0 black; } div:after { position:absolute; content:''; height:33px; width:33px; background:white; box-shadow:2px 2px 0 0 black, 5px 5px 0 0 white, 6px 6px 0 0 black; right:0; top:4em; margin-right:-19px; transform:rotate(136deg); } </style> </head> <body translate="no"> <div> </div> </body> </html>