HTML CSS examples for CSS Widget:Shape
Making a ribbon shape using css
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .container {<!--from w w w . j av a2 s .c o m--> width:61%; height:51px; margin:0 auto; position:relative; background-color:Chartreuse; } .tl { top:0; left:-26px; position:absolute; border-top:26px solid yellow; border-left:26px solid blue; border-right:26px solid pink; border-bottom:26px solid OrangeRed; } .tr { top:0; right:-26px; position:absolute; border-top:26px solid grey; border-left:26px solid BlueViolet; border-right:26px solid Chartreuse; border-bottom:26px solid yellow; } .br { bottom:0; right:-26px; position:absolute; border-top:26px solid blue; border-left:26px solid pink; border-right:26px solid OrangeRed; border-bottom:26px solid grey; } .bl { bottom:0; left:-26px; position:absolute; border-top:26px solid BlueViolet; border-left:26px solid Chartreuse; border-right:26px solid yellow; border-bottom:26px solid blue; } </style> </head> <body> <div class="container"> <div class="tl"></div> <div class="tr"></div> <div class="br"></div> <div class="bl"></div> </div> </body> </html>