CSS Transform Property split page down the middle to create triangle - HTML CSS CSS Animation

HTML CSS examples for CSS Animation:Transform

  1. HOME
  2. HTML CSS
  3. CSS Animation
  4. Transform

Description

CSS Transform Property split page down the middle to create triangle

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">
#container {<!-- w ww .ja v a  2s .  c  o m-->
   height:100px;
   width:100px;
   overflow:hidden;
   background-image:url('https://www.java2s.com/style/demo/Google-Chrome.png');
}

#triangle-topleft {
   width:0;
   height:0;
   border-top:100px solid Chartreuse;
   border-right:100px solid yellow;
}
</style> 
 </head> 
 <body> 
  <div id="container"> 
   <div id="triangle-topleft"></div> 
  </div>  
 </body>
</html>

Related Tutorials