Create cross lined background box - HTML CSS CSS Property

HTML CSS examples for CSS Property:background

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. background

Description

Create cross lined background box

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">

.blue-area, .green-area{
   display:inline-block;
   line-height:30px;
   height:30px;
}
.blue-area{<!--  w  w  w.j  ava  2 s. c om-->
   padding:0 0 0 8px;
   background-color:#26799b;
   position:relative;
}
.blue-area:after{
   content:'';
   position:absolute;
   left:100%;
   top:0;
   border-color:transparent transparent #26799b transparent;
   border-style:solid;
   border-width:0 30px 30px 0;
   display:block;
}
.green-area{
   background-color:#386c19;
   padding:0 8px 0 30px;
}


      </style> 
 </head> 
 <body> 
  <div class="wt"> 
   <div class="blue-area">
     text dfg gh fgh 
   </div> 
   <div class="green-area">
     text fgh fgh fgh fgdfg dfg dfg 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials