如何通过CSS伪元素实现仅倾斜div阴影、不改变内容显示效果？

问题原因 #

你现在的伪元素阴影不显示，主要遗漏了3个核心配置：

• 伪元素默认是行内元素，没有设置宽高也没有触发块级盒模型，没有实际渲染区域，box-shadow无法生效
• 没有给父容器设置定位属性作为参照，伪元素即使显示也无法和父div对齐
• 没有设置伪元素的层级，会默认叠在父元素内容上方，遮挡内部文本

修正后的代码 #

HTML

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

CSS

.my-class {
  height: 5rem;
  width: 10rem;
  /* 新增：作为伪元素绝对定位的参照容器 */
  position: relative;
  /* 以下为文本排版可选配置，可根据需求调整 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.my-class::before {
  content: "";
  /* 新增：脱离文档流，不影响内部文本布局 */
  position: absolute;
  /* 新增：让伪元素完全匹配父元素的尺寸和位置 */
  inset: 0;
  /* 新增：将伪元素放到父元素底层，避免遮挡文本 */
  z-index: -1;
  box-shadow: 0.2rem -0.4rem 0 0 rgba(0,0,0,0.6);
  transform: skew(0, 25deg);
}

实现说明 #

通过绝对定位让伪元素和父容器完全重合，仅对伪元素做skew变换，父容器内的文本不会受到任何变换影响，同时z-index设置保证阴影始终在内容下方，不会遮挡正常显示。

内容的提问来源于stack exchange，提问作者AlwaysLearning