How to create skew div

      No Comments on How to create skew div

How to create skew div using CSS transform function skew()

How to create skew div

How to create skew div – markup

HTML:

<div class="outer">
  <div class="skewed-div">
    <div class="skewed-content">
     <h1>SCANFCODE</h1>
     <p>Scanfcode.com “CODE WANTS TO BE SIMPLE” is an initiative to help the upcoming programmers with the code. Scanfcode focuses on providing the most efficient code or snippets as the code wants to be simple. We will help programmers build up concepts in different programming languages that include.
     </p>
   </div>
  </div>
</div>

CSS:

.outer
{
  padding:90px 0px;
  position:relative;
}
.skewed-div
{
   
   width:92%;
   background-color:#f4f5fd;
  -webkit-transform: skewY(-10deg);
   transform: skewY(-10deg);
   padding:4%;
   text-align:center;
  
}
.skewed-content
{
   -webkit-transform: skewY(10deg);
   transform: skewY(10deg);
}
.skewed-content p
{
  padding:2% 20%;
  font-size:20px;
  line-height:30px;
}

Demo:

See the Pen Skewed div by scanfcode (@scanfcode) on CodePen.

Summary
How to create skew div
Article Name
How to create skew div
Description
How to create skew div using CSS transform function skew() . -webkit-transform: skewY(-10deg); transform: skewY(-10deg); are used to create a div with skewed edges.
Author
Publisher Name
Scanfcode
Publisher Logo

Leave a Reply

Your email address will not be published. Required fields are marked *