Comment créer un trapèze avec un côté concave dans CSS3?

Question

J'essaie de créer un trapèze avec un côté concave.

Je préfère une solution CSS3 qui est compatible avec tous les navigateurs et sensible.

J'ai trouvé ce post qui fournit une solution assez similaire à ma solution attendue. Cependant, je préfère que le côté concave ne soit pas aussi rond que dans la solution fournie, ce que je n'ai pas pu faire jusqu'à présent.

Très important est que la forme supporte un canal alpha (rgba) parce que je veux mettre une image derrière la forme qui devrait briller à travers la forme.

La solution devrait se présenter comme suit:

Answer 1

Vous pouvez utiliser un div pour créer un rectangle de la taille souhaitée. Définissez div sur position: relative et overflow: hidden. Ensuite, utilisez un pseudo-élément avec position: absolute et un box-shadow opaque.

#container{ 
 
    width: 400px; 
 
    height: 200px; 
 
    background-image: url("http://www.menucool.com/slider/jsImgSlider/images/image-slider-2.jpg"); 
 
    padding: 50px; 
 
} 
 
#trapezoide{ 
 
    position:relative; 
 
    overflow: hidden; 
 
    
 
    /* Play with this properties to achieve the trapezoide just like you want. */ 
 
    height: 100px; 
 
    width: 300px; 
 
} 
 

 
#trapezoide:before{ 
 
    content: ""; 
 
    border-radius: 50%; 
 
    transform: translate(50%, -50%); 
 
    position: absolute; 
 
    box-shadow: 0 0 0 500px black; 
 
    
 
    /* Play with this properties to achieve the trapezoide just like you want. */ 
 
    width: 800px; 
 
    height: 800px; 
 
    top: -288px; 
 
    right: -100px; 
 
}

<div id="container"> 
 
    <div id="trapezoide"></div> 
 
</div>

Ajustez les propriétés indiquées pour faire le trapézoïde regarder juste que vous voulez.