HTML CSS examples for CSS Widget:Shape
Add a border to an (8 point star) css shape
<html lang="en"> <head> <title>Lorem ipsu</title> <style> #star8, #star8bis {<!--from ww w . j a v a2 s. co m--> margin:3em; border:4px solid Chartreuse; background:blue; width:81px; height:81px; position:relative; transform:rotate(21deg); display:inline-flex; align-items:center; justify-content:center; text-align:center; } #star8bis { height:201px; width:201px; } [id] .content { padding:16px; font-size:23px; color:yellow; transform:rotate(-21deg); z-index:2; } #star8:before, #star8bis:before { content:""; position:absolute; z-index:-2; top:0; left:0; height:100%; width:100%; background:blue; transform:rotate(136deg); box-shadow:0 0 0 4px red; } #star8:after, #star8bis:after { content:""; position:absolute; top:0; left:0; height:100%; width:100%; background:linear-gradient(to bottom left, blue 18px, transparent 16px, transparent 96px, blue 96px), linear-gradient(to bottom right, blue 18px, transparent 16px, transparent 96px, blue 96px); } </style> </head> <body translate="no"> <div id="star8"> <div class="content"> Lorem ipsum </div> </div> <div id="star8bis"> <div class="content"> Lorem ipsum </div> </div> </body> </html>