I am trying to create a trapezoide with one concave side.
I prefer a CSS3 solution which is cross-browser compatible and responsive.
I have found this post which provides a solution quite similar to my expected solution. However, I prefer the concave side not to be as round as it is in the provided solution, which I could not achieve so far.
Very important is that the shape supports an alpha channel (rgba) because I want to put an image behind the shape which should shine through the shape.
The solution should look as follows:
You can use a div
to create a rectangle with the desired size. Set the div
to position: relative
and overflow: hidden
.
Then use a pseudo-element with position: absolute
and an opaque 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>
Adjust the indicated properties to make the trapezoide look just you want.