HTML CSS examples for CSS Widget:Shape
get 'div' shaped as a flag with CSS
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> #text-div {<!-- w w w .j a va 2 s . c o m--> width:119px; height:61px; text-align:center; border:2px solid Chartreuse; border-bottom:0px; line-height:61px; } #pacman { width:0px; height:0px; border-right:61px solid yellow; border-top:0px; border-left:61px solid blue; border-bottom:61px solid pink; } #left-triangle { position:relative; left:-60px; border-right:59px solid OrangeRed; border-top:0px; border-left:59px solid grey; border-bottom:59px solid BlueViolet; } #right-triangle { position:relative; top:-60px; left:-58px; border-right:59px solid Chartreuse; border-top:0px; border-left:59px solid yellow; border-bottom:59px solid blue; } </style> </head> <body> <div id="text-div"> Lorem </div> <div id="pacman"> <div id="left-triangle"></div> <div id="right-triangle"></div> </div> </body> </html>