Responsive triangle with border to container's height and width - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Responsive Layout

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Responsive Layout

Description

Responsive triangle with border to container's height and width

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">
body, html {
   height:100%;
}

#triangleWrapper {<!--   ww w  . ja  v a  2 s.  c o  m-->
   width:501px;
   height:100px;
}

.segmentTriangle {
   width:100%;
   height:201%;
   left:0;
   top:100%;
   background:linear-gradient(to left bottom, transparent 51%, white 51%),
   linear-gradient(to right bottom, red 51%, transparent 51%);
}
</style> 
 </head> 
 <body> 
  <div id="triangleWrapper"> 
   <div class="segmentTriangle"></div> 
  </div>  
 </body>
</html>

Related Tutorials