HTML CSS examples for CSS Widget:Shape
Create a title inside a diamond shape
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> body {<!--from w w w . java 2 s .co m--> text-align:center; padding-top:31px; } .diamond { width:100px; height:100px; position:relative; margin-top:26px; display:inline-block; } .diamond:before { position:absolute; display:block; content:""; width:100px; height:100px; left:0; top:0; right:0; bottom:0; -webkit-transform:rotate(46deg); -webkit-transition:border-color 0.4s; -moz-transform:rotate(46deg); -moz-transition:border-color 0.4s; transform:rotate(46deg); box-shadow:0px 0px 22px -3px Chartreuse; } .diamond-inner { width:81px; height:81px; position:relative; margin-top:26px; display:inline-block; } .diamond-inner:before { position:absolute; display:block; content:""; width:81px; height:81px; left:0; top:-16px; right:0; bottom:0; border:2px solid yellow; -webkit-transform:rotate(46deg); -webkit-transition:border-color 0.4s; -moz-transform:rotate(46deg); -moz-transition:border-color 0.4s; transform:rotate(46deg); } </style> </head> <body> <div class="diamond"> <div class="diamond-inner"> Lorem </div> </div> </body> </html>