みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

任意の形 css html

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

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

投稿日時 - 2017-05-31 13:30:56

QNo.9335554

暇なときに回答ください

質問者が選んだベストアンサー

<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を
子要素で相殺するようにすれば要素の斜め切り抜きを実現できます
組み合わせれば台形での切り抜き実現できます

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

投稿日時 - 2017-06-01 01:42:49

お礼

ありがとうございました

Canvasでやる事にしました

投稿日時 - 2017-06-02 05:22:00

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問