CODEWITHSUNDEEP
htmlcssdiagonal
goosmaster
goosmaster

Reputation: 146

Align text diagonally in css3

I want to justify my content against an diagonal line (with some padding, transparent red line is an indicator) in css3, The problem is that (in the image) the gray diagonal line is on the body element, so I need to 'float' some sort of div inside the text and rotate it diagonally? But this cannot be responsive?

I'm not restricted to css3 only, I can fully change the html, css and javascript

(but I do not want to angle the text like Align text on slanted line has as answer)

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>

Upvotes: 0

Views: 1550

Answers (1)

vals
vals

Reputation: 64194

You can use the property shape-outside on another element that will keep the text away from the zone set.

In this example I am setting the background of this element to be the same than the shape, just to make it easier to see the effect

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>

Upvotes: 3

Related Questions