HTML CSS examples for CSS Widget:Shape
CSS custom shape with border radius
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .container {<!-- w ww. j ava 2 s . c o m--> position:relative; padding:31px; } .shape { position:absolute; text-align:center; padding:13px; height:61px; width:201px; } .shape:after { border-radius:6px; content:''; position:absolute; height:100%; width:100%; background:green; top:0; left:0; } .shape1:after { -webkit-transform:skew(-6deg, -4deg); -moz-transform:skew(-6deg, -4deg); -ms-transform:skew(-6deg, -4deg); -o-transform:skew(-6deg, -4deg); transform:skew(-6deg, -4deg); } .shape2:after { -webkit-transform:skew(0deg, -2deg); -moz-transform:skew(0deg, -2deg); -ms-transform:skew(0deg, -2deg); -o-transform:skew(0deg, -2deg); transform:skew(0deg, -2deg); top:5px; left:4px; } .shape3:after { -webkit-transform:skew(4deg, -3deg); -moz-transform:skew(3deg, -3deg); -ms-transform:skew(3deg, -3deg); -o-transform:skew(3deg, -3deg); transform:skew(3deg, -3deg); top:3px; left:-6px; } .set2 { margin-top:81px; } .set2 .shape2:after { background:red; } .set2 .shape3:after { background:blue; } </style> </head> <body> <div class="container"> <div class="shape shape1"></div> <div class="shape shape2"></div> <div class="shape shape3"></div> </div> <div class="container set2"> <div class="shape shape1"></div> <div class="shape shape2"></div> <div class="shape shape3"></div> </div> </body> </html>