Wie man Trapezoide mit konkaver Seite in CSS3 erstellt?

Question

Ich versuche ein Trapez mit einer konkaven Seite zu erstellen.

Ich bevorzuge eine CSS3-Lösung, die Browser-kompatibel und reaktionsfähig ist.

Ich habe diese post gefunden, die eine Lösung bietet, die meiner erwarteten Lösung ziemlich ähnlich ist. Ich bevorzuge jedoch, dass die konkave Seite nicht so rund ist wie in der vorgesehenen Lösung, was ich bisher nicht erreichen konnte.

Sehr wichtig ist, dass die Form einen Alpha-Kanal (rgba) unterstützt, weil ich ein Bild hinter die Form legen möchte, die durch die Form scheinen sollte.

Die Lösung sollte wie folgt aussehen:

Answer 1

Sie ein div kann ein Rechteck mit der gewünschten Größe zu erstellen. Setzen Sie die div auf position: relative und overflow: hidden.

Dann verwenden Sie ein Pseudo-Element mit position: absolute und ein undurchsichtiges box-shadow.

#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>

Passen Sie die angegebenen Eigenschaften der machen trapezoide aussehen nur Sie wollen.