Chris Hopkins Chris Hopkins - 1 year ago 80
CSS Question

Skewed Div - Right Side Only

I'm trying to create a div like the one below:

Skewed Text Area

What's the best way of going about it. I'm sorry for the lack of code but I think everything I have tried is on the wrong lines. I've tried rotating a div but the entire left side needs to stay at straight angles.

Is this possible?

Answer Source

.normal {
    background: gray;
      height: 200px;
    width: 50%;
    position: relative;
    padding: 20px;

.slanted {
    background: skyblue;
    box-sizing: border-box;
    height: 200px;
    width: 90%;
    position: absolute;
    padding: 20px;
      transform: skewY(4deg);

<div class="normal">
<div class="slanted">
    <h2>Hello World!</h2>
    <p>This was you are trying to get i Hope</p>