时间戳

首页 > 解决方案 > 在css3中对角对齐文本

html - 在css3中对角对齐文本

问题描述

我想用 css3 中的对角线（带有一些填充，透明的红线是一个指示符）来证明我的内容是合理的，问题是（在图像中）灰色对角线在 body 元素上，所以我需要'浮动' 文本中的某种 div 并沿对角线旋转？但这不能响应吗？

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

（但我不想像在斜线上对齐文本那样倾斜文本作为答案）

在此处输入图像描述

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;
}
<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>

标签： htmlcssdiagonal

解决方案

您可以在另一个元素上使用属性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>

推荐阅读