Création d'un élément de forme irrégulière avec css

Question

J'essaie de créer une boîte de dialogue de forme irrégulière en forme aimée dans le lien ci-dessous (sans la queue ondulée). J'ai pensé à le faire à travers du polyfill, mais cela a fini par rendre l'élément trop grand. J'ai pensé que je pourrais peut-être le faire avec des pseudo-éléments, mais je ne pensais pas que je pourrais mettre une ombre derrière l'effet et avoir le haut/bas de forme irrégulière avec juste deux pseudo-éléments.

La meilleure méthode que je pouvais penser était à imbriquer plusieurs div s à l'intérieur du principal et les positionner avec absolute et régler le top manuellement, mais je me demandais s'il y avait un moyen plus facile de le faire .

Si je veux faire un div comme ça et écrire des choses à l'intérieur sans les couper, comment dois-je faire?

Answer 1

Un seul élément avec des pseudo-classes positionnées de manière absolue en utilisant la perspective et les transformations peut ressembler à cela.

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>