Making a list element hex shaped with css - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Shape

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Shape

Description

Making a list element hex shaped with css

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
.hex {<!--  w  ww.  j av  a 2s.  co  m-->
   background:chartreuse;
   position:relative;
   width:5em;
   height:7.3em;
   border-radius:11px;
   display:inline-block;
   top:0;
}

.hex:before, .hex:after {
   position:absolute;
   width:inherit;
   height:inherit;
   border-radius:inherit;
   background:inherit;
   content:"";
}

.hex:before {
   transform:rotate(61deg);
}

.hex:after {
   transform:rotate(-61deg);
}
</style> 
 </head> 
 <body style="background-color:#299"> 
  <ol> 
   <li class="hex"> </li> 
  </ol>  
 </body>
</html>

Related Tutorials