Как создать на CSS трапецию с закругленными углами?

Для создания трапеции с закругленными углами на CSS можно использовать псевдоэлементы `::before` и `::after` в сочетании с трансформациями и скруглениями.

Вот пример CSS кода для создания такой трапеции:

```css
.trapezoid {
  position: relative;
  width: 200px; /* ширина трапеции */
  height: 100px; /* высота трапеции */
  background: #f0f0f0; /* цвет фона */

  border-radius: 10px; /* закругленные углы */

  /* нижняя часть трапеции */
  transform: skewY(-10deg);
}

/* создаем верхнее основание трапеции */  
.trapezoid::before {
  content: '';
  position: absolute;
  top: -20px;
  left: -20px;
  width: calc(100% + 40px);
  height: 20px;
  background: inherit;
  border-radius: 10px;
  transform: skewY(10deg);
}

/* создаем нижнее основание трапеции */  
.trapezoid::after {
  content: '';
  position: absolute;
  bottom: -20px;
  left: -20px;
  width: calc(100% + 40px);
  height: 20px;
  background: inherit;
  border-radius: 10px;
  transform: skewY(10deg);
}
```

Просто добавьте этот CSS код в свой файл стилей и примените класс `trapezoid` к элементу, который вы хотите превратить в трапецию с закругленными углами.

Самый простой вариант, наверное, сделать SVG. <br/> <br/> Немного корявый способ на css - наложить две фигуры друг на друга. <br/> <pre><code class="html">&lt;div class="container"&gt;
  &lt;div class="shape box"&gt;&lt;/div&gt;
  &lt;div class="shape parallelogram"&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre> <br/> <pre><code class="css">.shape {
  width: 1000px;
  height: 100px;
  background-color: grey;
  position: relative;
}
.box {
  border-radius: 20px 20px 0 0;
  z-index: 1;
}
.parallelogram {
  transform: skewY(-4deg);
  border-radius: 0 0 20px 20px;
  overflow: hidden;
  margin-top: -35px; /* степень перекрытия объектов*/
  z-index: 2;
}</code></pre>