Как сделать такую белую скругленную обводку с помощью css?

Question

Пробовал делать через полигон и границы, но всё время упирался в то, что линию не получалось скруглить и угол в итоге был устроконечным.

Answer 1

.container {
  width: 700px;
  height: 110px;
  background: black;
  position: relative;
}

.trapezoid {
  width: 350px;
  height: 100px;
  position: relative;
}

.trapezoid::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: black;
  border-radius: 0 15px 5px 0;
  transform: perspective(300px) rotateX(25deg);
  border-top: 5px solid white;
  border-right: 5px solid white;
  top: 6px;
}

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

p {
  color: white;
  position: absolute;
  left: 220px;
  top: 20px;
}

<div class="container">
  <div class="trapezoid right">
    <p>lorem<br> ipsum<br> dolor</p>
  </div>
  <div>

Не точь в точь, конечно... но, визуально похоже... правда, скос внизу немного отличается от оригинала... нужно играть с меньшим border-radius Но, если есть возможность использовать svg, то лучше svg

БЛОГ НА HUSL

Как сделать такую белую скругленную обводку с помощью css?

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