Как сделать вот такую изогнутую рамку?

Question

как сделать вот такую рамку для блока?

Answer 1

1.07 - это попытка вытянуть фон по вертикали, чтобы компенсировать поворот. Кажется, что должно быть можно вычислить, но можно и просто подогнать под нужные параметры. Возможно, ещё translateY надо присобачить...

nav {
  position: relative;
  z-index: 0;
  margin: 1em 10%;
  line-height: 3em;
  text-align: center;
}

nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: silver;
  transform: scaleY(1.07) perspective(10em) rotateX(-14deg);
  border-radius: .5em;
}

<nav>
  Тут будут ссылки
</nav>

БЛОГ НА HUSL

Как сделать вот такую изогнутую рамку?

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