对角切割一个部分并保持响应

Question

我正在寻找一种对角切割截面的方法，有点像下面使用 CSS 的图片。从左下角开始，剪切在所有页面尺寸上保持相同并且不与文本重叠，这一点非常重要。

如果重要的话，该部分是一个 div。

希望对大家有一点帮助

这是我尝试过的，但即使我更改值以适应一种分辨率，当我调整页面大小时，它会变得很奇怪

.cut
{
    position: relative;
    overflow: hidden;
}
.cut:after
 {
    content: "";
    position: absolute;
    top: 65%;
    left: 0;
    height: 104%;
    width: 130%;
    background: red;
    transform: rotate(-5deg);
 }

Answer 1

我会用

• 字体大小，单位为

  vw

• 固定

  aspect-ratio

• 削减是作为

  background-image

实施的

.cut {
  font-size: 3vw;
  background: cyan;
  aspect-ratio: 2/1;
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg viewBox='0 0 60 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 60 20 L 60 30 L 0 30 L 60 20 Z' style='stroke: rgb(0, 0, 0); fill: rgb(255, 0, 0); stroke-width: 0px;'/%3E%3C/svg%3E");
  padding: 1em;
  box-sizing: border-box;
}

<div class="cut">
  Hello<br>
  Hello<br>
  Hello<br>
  Hello<br>
  Hello<br>
  Hello<br>
  Hello<br>
  Hello<br>
  Hello<br>
</div>