Как лучше реализовать кубический эффект?

Question

Как лучше реализовать кубический эффект фона, с помощью псевдо элементов или создать div и уже на его основе крутить\шаманить? Пример на скриншоте

Answer 1

Вроде похож:

*, ::befire, ::after {
  box-sizing: border-box;
}

body {
  background: black;
}

div {
  width: 50vmin;
  aspect-ratio: 1;
  margin: 0 0 25vmin 25vmin;
  border: 1px solid green;
  position: relative;
}

div::before, div::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: inherit;
}

div::before {
  transform-origin: 0 0;
  transform: skewY(-45deg) scaleX(-.35);
  background: linear-gradient(150deg, green, transparent 110%);
}

div::after {
  transform-origin: 0 100%;
  transform: skewX(-45deg) scaleY(-.35);
}

<div></div>

БЛОГ НА HUSL

Как лучше реализовать кубический эффект?

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