Create skew div side by side

Question

How do i create like the image using two div?

I have search many used skew and I tried but didn't get exactly like the image. only skew the div. not the content inside.

Here is what I have tried:

 .container{ width: 100%; } .left{ float: left; background: red; height: 50px; width: 50%; -ms-transform: skew(-30deg, 0deg); -webkit-transform: skew(-30deg, 0deg); transform: skew(-30deg, 0deg); } .right{ float: left; background-color: #666; height: 50px; width: 50%; } 

 <div class="container"> <div class="left"> LEFT </div> <div class="right"> RIGHT </div> </div> 

Answer 1

How is this. I used a gradient background and CSS grid to create two divs inside that are not skewed. A couple of caveats:

• You will need to use padding on both sides to keep your text from running over the top of your color change.
• You may need to use webkit for browser support of the linear gradient, depending on which older browser you intend to support.

 .container { background: linear-gradient(45deg,#FF0000 50%,#666666 50%); display: grid; grid-template-columns: auto auto; width: 100%; } .side { background-color: transparent; color: #FFFFFF; height: 50px; } 

 <div class="container"> <div class="side"> test </div> <div class="side"> test </div> </div>