Create Angled CSS background with bottom border. - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Border

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

Description

Create Angled CSS background with bottom border.

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>testing</title> 
  <style>
body {<!--from ww  w .  j  av  a  2s . c  o  m-->
   max-width:501px;
}

#top-background-flag {
   position:relative;
   border-top:3px solid Chartreuse;
   background:linear-gradient(
   to bottom right,
   yellow 51%,
   transparent 51.6%
   )
   no-repeat bottom, 
   linear-gradient(100deg, blue, pink) no-repeat top;
   padding-bottom:4.6rem;
   background-size:100% 4rem, 100% calc(100% - 4rem)
}

#top-background-flag:after {
   content:"";
   background-color:WhiteSmoke;
   height:3px;
   width:100%;
   position:absolute;
   left:0;
   bottom:24px;
   transform:rotate(-6.6deg);
}
</style> 
 </head> 
 <body translate="no"> 
  <div id="top-background-flag">
    A fun title 
  </div>  
 </body>
</html>

Related Tutorials