修复倾斜元素的位置

Question

我找不到正确的方法来完成我的 CSS。

我需要这种设计，但我无法使其响应。

当屏幕宽度改变时，倾斜的元素会移动，但我需要它的右边缘与矩形的左边缘处于相同的位置。

我的代码： 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;
}

我该怎么办？谢谢！

Answer 1

一个 clip-path 代码更少的解决方案：

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

修复倾斜元素的位置

Fix the position of a skewed element

html

css

responsive-design

skew