Выровнять текст по диагонали в css3 - PullRequest
Новая
       1

Выровнять текст по диагонали в css3

0 голосов
/ 28 мая 2018

Я хочу выровнять свой контент по диагональной линии (с некоторыми отступами, прозрачная красная линия является индикатором) в css3, проблема в том, что (на рисунке) серая диагональная линия находится на элементе body, поэтому мне нужно«плавать» какой-то div внутри текста и вращать его по диагонали?Но это не может быть отзывчивым?

Я не ограничен только css3, я могу полностью изменить html, css и javascript

(но я не хочу наклонять текст как Выровнять текст по наклонной линии имеет ответ)

enter image description here

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>

1 Ответ

0 голосов
/ 28 мая 2018

Вы можете использовать свойство 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>
...