Custom shape Heading Panel - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Shape

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

Description

Custom shape Heading Panel

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <style>
body {<!--   w ww . ja  va2 s  . c  o m-->
   background-color:Chartreuse;
}

.whiteBox {
   width:66px;
   height:66px;
   background-color:yellow;
   border-radius:51px;
   position:absolute;
   left:0;
   right:0;
   margin:0 auto;
   z-index:21;
}

.image {
   text-align:center;
   height:100%;
   background:no-repeat center center;
}

.container {
   width:276px;
   height:351px;
   background-color:blue;
   margin:0 auto;
   position:absolute;
   left:0;
   right:0;
   margin:0 auto;
   top:39px
}

.text {
   text-align:center;
   z-index:26;
   position:absolute;
   left:36%;
}
</style> 
 </head> 
 <body translate="no"> 
  <div class="whiteBox"> 
   <div class="image" style="background-image: url('');"></div> 
  </div> 
  <div class="container"> 
   <div class="text"> 
    <h2>Lorem i</h2> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials