Background gradient and rotation - HTML CSS CSS Property

HTML CSS examples for CSS Property:background

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

Description

Background gradient and rotation

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 {<!--   www .j a v a2 s . c  o  m-->
   height:800px;
}
.seperator {
   margin:400px 0 0 0;
   background-attachment: fixed;
   background-color: rgba(0, 157, 197, 1);
   background-image: -webkit-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
   background-image: -moz-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
   background-image: -o-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
   background-image: linear-gradient(to bottom, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
   width:100%;
   height:40px;
   text-align: center;
}
.triangle {
   width:40px;
   height:40px;
   display: inline-block;
   margin: 10px 0;
   -moz-transform: rotate(45deg);
   -webkit-transform: rotate(45deg);
   -o-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   transform: rotate(45deg);
   background-attachment: fixed;
   background-color: rgba(0, 157, 197, 1);
   background-image: -webkit-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
   background-image: -moz-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
   background-image: -o-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
   background-image: linear-gradient(to bottom, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
   background-repeat:no-repeat;
}


      </style> 
 </head> 
 <body> 
  <div class="seperator"> 
   <div class="triangle"></div> 
  </div>  
 </body>
</html>

Related Tutorials