Question

我想在css3中用对角线（有一些填充，透明的红线是一个指示符）证明我的内容，问题是（在图像中）灰色对角线在body元素上，所以我需要到＆＃39;漂浮＆＃39;文本中的某种div并对角旋转？但这不能回应？

我不仅限于css3，我可以完全更改html，css和javascript

（但我不想像Align text on slanted line那样对文字进行角度作为答案）

＆＃13;

body:after {
    position: absolute;
    top: 0;
    right: 0;
    content: "";
    border-top: 1500px solid #f7f7f7;
    border-right: 0px solid #f7f7f7;
    border-left: 85vh solid transparent;
    z-index: -1;
}

＆＃13;

<body>
    <div class="contentIntrotext">
        Labore facere nam et sunt fugiat dolores quibusdam. Vero ratione optio culpa maiores blanditiis ipsa odit rerum. Temporibus sed ea qui quo omnis. Qui modi nemo ea illo et voluptates facilis voluptatem. Aliquam minima nobis ut iusto. Rerum nihil ut voluptas doloremque harum placeat maiores.

        Libero nesciunt molestiae est. In error quasi iure voluptate qui est harum eos. Quidem quia amet ratione eum repellat iusto ut aperiam. Vero inventore quae possimus ut voluptate quia ut. Quis quae aut aut occaecati quaerat distinctio quia.

        Quia facilis est sunt et molestiae impedit esse. Velit pariatur rerum in. Autem neque et quibusdam ea omnis et accusamus. Alias adipisci ducimus rem dolores iusto ad veniam rerum
    </div>
</body>

＆＃13;

Answer 1

您可以在另一个元素上使用 shape-outside 属性，使文本远离区域集。

在这个例子中，我将此元素的背景设置为与形状相同，只是为了更容易看到效果

body:after {
    position: absolute;
    top: 0;
    right: 0;
    content: "";
    border-top: 1500px solid #f7f7f7;
    border-right: 0px solid #f7f7f7;
    border-left: 85vh solid transparent;
    z-index: -1;
}

.spacer {
    float: right;
    width: 60%;
    height: 300px;
    background: linear-gradient(to top right, transparent 50%, tomato 50%);
    shape-outside: polygon(100% 0%, 100% 100%, 0 0%);
}

<body>
    <div class="spacer"></div>
    <div class="test">
        Labore facere nam et sunt fugiat dolores quibusdam. Vero ratione optio culpa maiores blanditiis ipsa odit rerum. Temporibus sed ea qui quo omnis. Qui modi nemo ea illo et voluptates facilis voluptatem. Aliquam minima nobis ut iusto. Rerum nihil ut voluptas doloremque harum placeat maiores.

        Libero nesciunt molestiae est. In error quasi iure voluptate qui est harum eos. Quidem quia amet ratione eum repellat iusto ut aperiam. Vero inventore quae possimus ut voluptate quia ut. Quis quae aut aut occaecati quaerat distinctio quia.

        Quia facilis est sunt et molestiae impedit esse. Velit pariatur rerum in. Autem neque et quibusdam ea omnis et accusamus. Alias adipisci ducimus rem dolores iusto ad veniam rerum
    </div>
</body>

在css3

1 个答案: