Сделать прямоугольник с наклоном с одной стороны

Question

Необходимо сделать прямоугольник такого вида и чтобы он был адаптивный. Пробовал через:

clip-path, но с ним не получают border-radius;
path, но блок не будет адаптивным и туда не разместить контент, то есть при сужении экрана, всё будет ломаться.
:after, то есть туда располагал именно этот правый наклон transform: skew(-16deg), а родитель был обычный прямоугольник, это то же какой то костыль и он при адаптиве ломается

div {
  width: 300px;
  height: 100px;
  background: black;
  border-radius: 10px;
  clip-path: polygon(0 0, 100% 0, 95% 100%, 0 100%);
}

<div></div>

Answer 1

Как вариант можно применить SVG filter, который будет скруглять углы.

div {
  filter: url('#border-radius');
  width: 300px;
  height: 100px;
}
div::before {
  content: "";
  display: block;
  padding-top: 36%;
  background: black;
  clip-path: polygon(0 0, 100% 0, 95% 100%, 0 100%);
}

<div></div>

<svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
        <filter id="border-radius"><feGaussianBlur in="SourceGraphic" stdDeviation="6" result="blur" />    
            <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="border-radius" />
            <feComposite in="SourceGraphic" in2="border-radius" operator="atop"/>
        </filter>
    </defs>
</svg>

Сам способ скругления углов различных геометрических фигур я как-то давно прочитал вот тут. Тут же подробно описано как строится такой фильтр, какие операторы применены и для чего. Может будет полезно.

Answer 2

Еще как вариант

body {
  padding: 2rem;
  margin: 0;
}

.block {
  width: 300px;
  height: 100px;
  color: #fff;
  padding: 1rem;
  box-sizing: border-box;
  position: relative;
}

.block::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  border-radius: 10px;
  transform: perspective(300px) rotateX(20deg);
}

.block--figure-right-side::before {
  transform-origin: 0% 50%;
}

.block--figure-left-side::before {
  transform-origin: 100% 50%;
}

.block span {
  position: relative;
}

<div class="block block--figure-right-side"><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span></div>
<div class="block block--figure-left-side"><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span></div>

БЛОГ НА HUSL

Сделать прямоугольник с наклоном с одной стороны

Ответы (2 шт):