I want to create a div of this shape. I am unable to get rounded corners on all the corners with pseudo-elements such as ::before and :: after . I tried to manuplate this code but unable to reach the desired shape and rounded corners all the corners.

<div >
</div>

.trapezoid {
  position: relative;
  width: 90%;
  height: 200px;
  overflow: hidden;
  border-radius:20px !important;
}

.trapezoid:after {
  content: '';
  position: absolute;
  top: -100px;
  left: 0;
  width: 140%;
  height: 100%;
  background: red;
  border-radius: 20px 20px 20px 20px;
  -webkit-transform-origin: 100% 100%;
  -moz-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  -o-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
  -webkit-transform: perspective(400px) rotateX(45deg);
  -moz-transform:  perspective(400px) rotateX(45deg);
  -ms-transform: perspective(400px) rotateX(45deg);
  -o-transform: perspective(400px) rotateX(45deg);
  transform: perspective(400px) rotateX(45deg);
}

CodePudding user response：

I would use a clip-path CSS declaration, using a path() function for the basic shape.

You have to tweak a little with the right numbers to get the exact dimensions and corners you want, but I'd say it could be the way to go:

.shape {
  background: lightgrey;
  width: 330px;
  height: 140px;
  clip-path: path('M70 0 320 0 A 10 10 0 0 1 330 10 L 330 130 A 10 10 0 0 1 320 140 L 10 140 A 10 10 0 0 1 0 130 L 0 70 A 5 10 45 0 1 6 60 L 60 6 A 5 10 45 0 1 70 0Z')
}

<div class='shape'></div>

Or a little different approach with <svg> (click on Full page link when running):

.svg {
  width: 95vw;
  height: 95vh;
  display: block;
  margin: auto;
}


/*.shape {
  background: lightgrey;
  width: 100%;
  height: 100%;
}*/

<svg class='svg' viewBox='0 0 330 130'>
  <path class='shape' fill='lightgrey' d='M70 0 320 0 A 10 10 0 0 1 330 10 L 330 130 A 10 10 0 0 1 320 140 L 10 140 A 10 10 0 0 1 0 130 L 0 70 A 5 14.14213 45 0 1 5 60 L 60 5 A 5 14.14213 45 0 1 70 0Z'></path>
</svg>