HTML CSS examples for CSS Widget:Shape
make diamond shape
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> #wrap {<!-- ww w.j a v a2 s. c o m--> position:relative; margin-left:100px; margin-top:100px; width:151px; height:151px; } .diamond, .diamond2 { position:absolute; background-color:Chartreuse; border:2px solid yellow; } .diamond { height:100px; margin-left:21px; width:99px; transform:rotate(46deg); -ms-transform:rotate(46deg); -webkit-transform:rotate(46deg); } .diamond2 { height:201px; color:blue; width:141px; margin-top:51px; text-indent:11px; } </style> </head> <body> <div id="wrap"> <div class="diamond"></div> <div class="diamond2"> Lorem ipsum dolo </div> </div> </body> </html>