Tilt a DIV in fex. 45 degrees.

[LeonLatex]

Look at the picture I attach. I want a DIV if possible (CSS?) And tilt it at an angle as many degrees as the image. In that case, I will have 5-6 such in a row in the head on the website to avoid making a large (wide) image with 5-6 such in a row. I have tried it, but then I lose the scaling of the page to be as narrow in width as without a picture with your slanted words on.
Lorem ipsum is the only image on the preview image, but it's not displayed yet.
So is there such a feature in CSS3 that tilts a DIV in e.g. 45 degrees?

Edited July 20, 2022 by LeonLatex

[cyberRobot]

Perhaps transform: rotate() will do what you need. More information can be found here:
https://css-tricks.com/almanac/properties/t/transform/#aa-rotate

[Barand]

The picture you attached is too difficult to see but it sounds like you could use a rotation transform

[LeonLatex]

Thanks CyberRobot. I was looking for something like that on w3schools, but couldnt find something like that.

 

[LeonLatex]

Sorry for forgetting the picture (showing me naked 😂😁)
Now it's attached.

Edited July 20, 2022 by LeonLatex

[requinix]

An SVG of that image would be very small...

[Barand]

Here's an example to get you started

<?php 
    function svgHead($txt)
    {
        $svg = "<svg class='longhead' width='150' height='100'>
                <style type='text/css'>
                    .headtext {
                        font-size: 11pt;
                        fill: orange;
                    }
                </style>
                <path d='M 0 100 l 40 0 l 100 -100 l -40 0 Z' fill='black' />
                <text x='35' y='95' class='headtext' transform='rotate(-45, 35, 95 )'>$txt</text>
                </svg> 
               ";
        return $svg;
    }
?>
<style type='text/css'>
    div.outer {
        border: 1px solid black;
        height: 105px;
    }
    
    svg.longhead {
        margin: -50px;
        position: relative;
        top: 35px;
        left: 50px;
    }
</style>
<div class='outer'>
    <?= svgHead('Long Heading 1')?>
    <?= svgHead('Long Heading 2')?>
    <?= svgHead('Long Heading 3')?>
    <?= svgHead('Long Heading 4')?>
    <?= svgHead('Long Heading 5')?>
    <?= svgHead('Long Heading 6')?>
</div>

output

[LeonLatex]

Then it will be..:

transform: skewX(25deg);

 

[LeonLatex]

Thanks barand. I tried a little myself by using the transform: skewX(45deg); But this wasn't working. I used some time on it but gave up for the evening. Then I came over/I saw your example too late, but when I did, I tried your script, and that was working (of course 😊👍). Hope it's ok if I copy and paste and saves your code on my network for later use? This was great😊 thanks 😊

[Barand]

You don't need the SVG. I used it to skew the container but not the text. Using just html/css you can convert

to by adding transform:rotate(-45deg) skewX(45deg); to its styling. It will still need some positioning adding though.

 

[LeonLatex]

Thanks, Barand. I made it with your second answer. The answer above is a good bonus.