我正在做一个涉及漫画布局的练习项目，我想设计页面的一部分看起来像漫画面板。
我已经成功地使用
transform: skew(10deg);transform: skew(-10deg);如何使用CSS实现这种效果？我是否应该使用特定的技术或属性来确保文本正确填充倾斜的面板？
这是设计草图。
感谢您的宝贵时间！
我遇到了
shape-outside这是我到目前为止所拥有的：
HTML：
<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>
CSS：
* {
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);
}
clip-path* {
margin: 0;
box-sizing: border-box;
}
body {
min-height: 100dvh;
display: flex;
justify-content: center;
align-items: center;
}
.card {
background-image: url(https://placehold.co/600x400/EEE/31343C);
background-position: center;
transform: skew(-20deg);
width: 70%;
}
.content {
padding: 1rem 3rem;
width: 60%;
background-color: yellowgreen;
clip-path: polygon(0% 0%, 75% 0%, 100% 42%, 75% 100%, 0% 100%);
}
.content>* {
transform: skew(20deg);
}
.card-desc {
padding: 1rem;
}<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>