CSSで奇数形の要素を作る

Question

私は、奇妙な形のダイアログボックスを下のリンク（尻尾のつまみなし）で好きな形にしようとしています。私はpolyfillでやってみることを考えましたが、要素が大きすぎるようになりました。私は擬似要素を使って多分それを行うことができると思ったが、シャドーバック効果を入れ、ちょうど2つの疑似要素を持つ奇妙な上/下を持つことはできないと思った。

私は考えることができる最高の方法は、巣の倍数にメインの内部div sであったとabsoluteでそれらを配置し、手動topを設定し、そうすることの簡単な方法があった場合、私は思っていました。

このようにdivを作成し、中断しないで内部に書き込む場合は、どうすればいいですか？

Answer 1

パースペクティブとトランスフォームを使用して絶対的に配置された擬似クラスを持つ単一の要素は、そのように見えます。

div { 
 
    position: relative; 
 
    display: inline-block; 
 
    color: white; 
 
    margin: 3em; 
 
    perspective: 250px; 
 
} 
 
div::before, div::after { 
 
    content: ''; 
 
    position: absolute; 
 
    z-index: -1; 
 
    top: -1em; 
 
    left: -1.5em; 
 
    right: -2em; 
 
    bottom: -1em; 
 
    background: black; 
 
    padding: 2em 3em .5em .5em; 
 
    transform: rotateX(180deg) rotateY(15deg) rotate(1.5deg) skewX(25deg); 
 
} 
 

 
div::before { 
 
    background: white; 
 
    top: -1.5em; 
 
    left: -2.25em; 
 
    right: -2.75em; 
 
    bottom: -1.75em; 
 
    transform: rotateX(180deg) rotateY(15deg) skewX(35deg); 
 
} 
 

 
body { 
 
    background: red; 
 
}

<div>i know kung foo</div>