HTML CSS examples for CSS Widget:Shape
Create this shape with the pseudo elements :before and :after
<html lang="en"> <head> <title>Lorem ipsum </title> <style> html, body { height:100%; width:100%; margin:0; padding:0; overflow:hidden } .bar {<!-- w ww .java 2s . c o m--> position:absolute; top:0; left:21%; width:301px; height:21px; background:black; } .bar:before { content:" "; display:block; position:absolute; left:-501px; top:0; width:501px; height:81px; background:black; -webkit-transform:skew(-31deg,0deg); transform:skew(-31deg,0deg); } .bar:after { content:" "; display:block; position:absolute; left:281px; top:0; width:2001px; height:36px; background:black; -webkit-transform:skew(31deg,0deg); transform:skew(31deg,0deg); } </style> </head> <body translate="no"> <div class="bar"></div> </body> </html>