Granularity of shapes in CSS - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Shape

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

Description

Granularity of shapes in 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">
div {<!--from  w  w  w .j av  a 2s.c  o  m-->
   margin-bottom:21px;
}

.chevron {
   background-image:linear-gradient(to bottom left, Chartreuse 0%, yellow 51%, transparent 51%, transparent 100%),
   linear-gradient(to bottom right, blue 0%, pink 51%, transparent 51%, transparent 100%);
   background-position:bottom left,
   bottom right;
   background-repeat:no-repeat;
   background-size:51% 100%;
   background-color:OrangeRed;
   width:100%;
   height:51px;
}

.chevron2 {
   background-color:grey;
   position:relative;
   width:100%;
   height:51px;
}

.chevron2::before {
   position:absolute;
   top:0;
   left:0;
   right:51%;
   bottom:0;
   content:'';
   background-image:linear-gradient(to bottom left, BlueViolet 0%, Chartreuse 51%, transparent 51%, transparent 100%);
}

.chevron2::after {
   position:absolute;
   top:0;
   left:51%;
   right:0;
   bottom:0;
   content:'';
   background-image:linear-gradient(to bottom right, yellow 0%, blue 51%, transparent 51%, transparent 100%);
}

.chevron3 {
   background-color:pink;
   position:relative;
   width:100%;
   height:51px;
}

.chevron3::before {
   box-sizing:border-box;
   position:absolute;
   top:0;
   left:0;
   right:51%;
   bottom:0;
   content:'';
   border-top:51px solid OrangeRed;
   border-left:51vw solid grey;
}

.chevron3::after {
   box-sizing:border-box;
   position:absolute;
   top:0;
   left:51%;
   right:0;
   bottom:0;
   content:'';
   border-top:51px solid BlueViolet;
   border-right:51vw solid Chartreuse;
}

.chevron3 {
   background-color:yellow;
   position:relative;
   width:100%;
   height:51px;
}

.chevron3::before {
   box-sizing:border-box;
   position:absolute;
   top:0;
   left:0;
   right:51%;
   bottom:0;
   content:'';
   border-top:51px solid blue;
   border-left:51vw solid pink;
}
</style> 
 </head> 
 <body> 
  <p>Lorem ipsum dolor sit amet, consectetur a</p> 
  <div class="chevron"></div> 
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper molestie</p> 
  <div class="chevron2"></div> 
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper molestie</p> 
  <div class="chevron3"></div>  
 </body>
</html>

Related Tutorials