Блог

Считать:

 <div class="my-class">
  AAA
</div>
 

Я пытаюсь только исказить тень, но не содержание div , помещая тень в псевдоэлемент:

 .my-class {
  height: 5rem;
  width: 10rem;

  amp;::before {
    content: "";
    box-shadow: 0.2em -0.4rem 0 -0em rgba(0,0,0,0.6);
    transform: skew(0, 25deg);
  }
}
 

Пример отображается в jsbin.

Я, очевидно, что-то неправильно понимаю в псевдоэлементах, потому что тень даже не появляется. Что я упускаю и как можно исправить этот код, чтобы исказить тень, но не текст?

Есть пара вещей. Псевдо — элементу необходимы ширина и высота, и в приведенном ниже фрагменте предполагается, что они должны совпадать с его элементом-владельцем.

Кроме того, где должен быть размещен элемент? Этот фрагмент предполагает, что требуется, чтобы тень была смещена, но как если бы это была тень на главном элементе, поэтому он позиционирует ее абсолютно относительно основного элемента. Очевидно, измените это, если я неправильно понял.

 .my-class {
  height: 5rem;
  width: 10rem;
  position: relative;
}

.my-class::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0.2em -0.4rem 0 -0em rgba(0, 0, 0, 0.6);
  transform: skew(0, 25deg);
}


} 

 <div class="my-class">
  AAA
</div>