create a slanting border with css using transform - HTML CSS CSS Property

HTML CSS examples for CSS Property:text-transform

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. text-transform

Description

create a slanting border with css using transform

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">

.main {<!--  w  ww  .j  a va  2s . c om-->
   height: 50px;
   background-color: #d6d6d6;
   margin-bottom: 50px;
   position: relative;
}
.main:after, footer:before {
   content: " ";
   width: 100%;
   height: 40px;
   background: inherit;
   position: absolute;
   -webkit-transform: rotate(-1deg);
   -moz-transform: rotate(-1deg);
   -o-transform: rotate(-1deg);
   -ms-transform: rotate(-1deg);
   transform: rotate(-1deg);
   z-index: -1;
}
.main:after {
   bottom: -20px;
}
footer:before {
   top: -20px;
}
footer {
   height: 93px;
   background-color: #ff6138;
   position: relative;
}
.footer-info {
   position: absolute;
   bottom: 27px;
   left: 33px;
}
footer span {
   color: #ffff9d;
   text-transform: uppercase;
   font-weight: 300;
   letter-spacing: 0.05em;
   font-size: 1.1875em;
}
footer .tel {
   color: #fff;
   font-weight: 400;
   font-size: 1em;
   margin-left: 24px;
}
body {
   background-color: #ff9200;
}


      </style> 
 </head> 
 <body> 
  <div class="main"></div> 
  <footer> 
   <div class="footer-info"> 
    <span>Company Ltd</span> 
    <span class="tel">Tel: 132 - 231 24 43</span> 
   </div> 
  </footer>  
 </body>
</html>

Related Tutorials