Fix the position of a skewed element

user_13554335 0
Viewed 81

I'm failing to find the correct way to do my CSS.

I need this kind of design, but I'm failing to make it responsive. design

When the screen width changes, the skewed element moves, but I need it's right edges to be in the same position as the rectangle's left edges.

My code: HTML

<body>
        <div class="wrapper">
            <div class="subtract" style="background-color: red;"></div>
            <div class="rectangle" style="background-color: red;"></div>
        </div>
        <div class="wrapper">
            <div class="subtract" style="background-color: aqua;"></div>
            <div class="rectangle" style="background-color: aqua;"></div>
        </div>
</body>

CSS:

.subtract {
    float: left;
    width: 30%;
    height: 100%;
    transform: skewY(30deg) translate(0px, -100px);
}

.rectangle {
    float: left;
    width: 70%;
    height: 100%;
}

.wrapper {
    width: 100%;
    height: 500px;
}

What should I do? Thanks!

skew responsive-design css html
1 Answers

A clip-path solution with less of code:

.wrapper {
  height: 300px;
  background:aqua;
  clip-path:polygon(0 0,100% 0,100% 100%, 30% 100%,0% calc(100% - 100px));
}
.wrapper::before {
  content:"";
  display:block;
  height:100px;
  background:red;
  clip-path:inherit;
}
<div class="wrapper"></div>

user_86203330
Related