Search code examples
csscss-shapesshapesconcave

How to create trapezoide with concave side in CSS3?

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:

Trapezoide with concave side

Solution

  • You can use a div to create a rectangle with the desired size. Set the div to position: relativeand 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.