任意の形 css html

質問

いわゆる漫画のコマ割り的な形でボックスを組みたいのですが、cssでは無理ですよね？何かしら手があれば教えてください。

ボックスの背景に画像を入れ込みます。

回答No.1

H240S18B73 · ベストアンサー

<div class="container1">
<div class="container2">
<div class="content">余分<br>三兄弟<br>見参</div>
</div>
</div>
<style>
.container1{
width:800px;height:400px;
margin:100px auto;
overflow: hidden;
transform: skewY(5deg) skewX(2deg);
}
.container1 .container2{
width:100%;height:100%;
overflow: hidden;
transform:translate(-200px,-100px) skewY(10deg) skewX(4deg);
}
.container1 .container2 .content{
width:100%;height: 100%;
background: #dc8;
color:#fff;
text-align: center;
font-size: 100px;
line-height: 100px;
font-weight: bold;
transform:translate(100px,80px) skewY(-5deg) skewX(-2deg) skewY(-10deg) skewX(-4deg) scale(1.2);
overflow: hidden;
}
</style>

overflow:hidden;しつつ親要素のtransformを
子要素で相殺するようにすれば要素の斜め切り抜きを実現できます
組み合わせれば台形での切り抜き実現できます

ただし組み合わせなしの平行四辺形での切り抜きなら
綺麗に境界線をつけられますが
台形の場合ははみ出さずに境界線を綺麗につけるのは難しいです

お礼

ありがとうございました

Canvasでやる事にしました