带有html / css / scss的div上的框阴影[关闭]答案

【问题标题】：Box shadow on div with html/css/scss [closed]带有html / css / scss的div上的框阴影[关闭]
【发布时间】：2022-01-09 20:09:55
【问题描述】：

Card example

大家好，我想使用 html/css 或 scss 在一些卡片 div 下复制这些阴影。我正在考虑某种循环（scss）将几个 div 添加到另一个上，在 x 和 y 中它的前一个 div 之间只有一个 px 偏移。不知道如何实现。你们有什么建议吗？

谢谢大家！

【问题讨论】：

标签： html css sass shadow card

【解决方案1】：

您添加这么多 div 的计划......不是很好。试图做到这一点将是一个沉重的页面。也许这样的事情可以工作，虽然溢出有点问题......

html, body {
  height: 100%;
}
body {
  background: teal;
  overflow: hidden;
}
main {
  position: absolute;
  width: 50%;
  height: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
main div {
  background: white;
  width: 100%;
  height: 100%;
}
main:before,
main:after {
  position: absolute;
  content: '';
  background: black;
}
main:before {
  width: 100%;
  height: 300px;
  top: 100%;
  left: 0;
  transform: skewX(45deg);
  transform-origin: 0 0;
}
main:after {
  height: 100%;
  width: 300px;
  left: 100%;
  top: 0;
  transform: skewY(45deg);
  transform-origin: 0 0;
}

<main>
  <div></div>
</main>

【讨论】：