I am currently working on a project to practice designing comic layouts, and I would like to create a section of the page that resembles a comic panel.
By using transform: skew(10deg);, I have successfully skewed the panel, and I can reverse the skew for the content with transform: skew(-10deg);. While this is a good start, I am now looking to ensure that the text fills the skewed shape, similar to the sketch I have shared below.
What CSS techniques or properties should I utilize to achieve this effect? How can I make sure that the text fits appropriately within the skewed panel?
You can view the design sketch here.
Thank you in advance for your assistance!
I recently came across the shape-outside property, but I struggled to understand how to apply it in reverse.
This is what I have implemented so far:
* {
margin: 0;
box-sizing: border-box;
}
body {
min-height: 100dvh;
display: flex;
justify-content: center;
align-items: center;
}
.card {
background-color: teal;
transform: skew(-20deg);
width: 70%;
}
.content {
padding: 1rem 3rem;
width: 50%;
background-color: yellowgreen;
}
.content>* {
transform: skew(20deg);
}<body>
<div class="card">
<div class="content">
<h2 class="card-title">cool title</h2>
<p class="card-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed totam praesentium nisi quibusdam explicabo error officia veritatis ut facere nostrum, repellat iusto optio deserunt qui laboriosam maiores vel? Vel quis optio, nulla error totam explicabo
ipsam neque eos non magni!</p>
</div>
</div>
</body>