Question

我正在寻找一种办法,用心智地切割一个部分,即像下文中那样的图像。重要的是,这一削减在所有页数上都保持不变,与案文没有重叠,而从底层左上角开始。

如果是的话,该节是四分五裂的。

我希望你能够帮助找到一条轨道。

这是我所尝试的,但即使我改变我的价值观,以适应一个决议,即我翻过一页的时候,它却得到我们的欢迎。

.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

I would use

font size in vw units
fixed aspect-ratio
the cut is implemented as a 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");
  background-position: bottom;
  background-repeat: no-repeat;
  padding: 1em;
  box-sizing: border-box;
}

<div class="cut">
  One<br>
  Two<br>
  Three<br>
  Four<br>
  Five<br>
  Six<br>
  Seven<br>
  Eight<br>
  Nine<br>
  Ten<br>
  Eleven<br>
  Twelve
</div>

After running the snippet, make sure to click the full page link to properly test the responsiveness.

友情链接