斜角上的箱形阴影答案

【问题标题】：Box-Shadow over angled corner斜角上的箱形阴影
【发布时间】：2022-02-14 22:06:16
【问题描述】：

我有一个右下角倾斜的元素，我必须在其上放置一个盒子阴影。有时倾斜的角落会被徽章覆盖 - 如果是这种情况，我的问题不适用：

这是信息框及其角落的 (s)css 部分（还有一些样式，但它们只是文本修饰符...整个内容都在 codepen 上：https://codepen.io/kerowan/pen/bqMOeB

.product-info-wrapper {
  position: absolute;
  top: 150px;
  max-width: 100%;
  padding-bottom: 10px;
  width: 100%;
  .product-info {
    position: relative;
    padding: 1rem * .5;
    padding-right: 1rem * 2;
    overflow: hidden;
    box-shadow: 0 0 5px;
    &:before,
    &:after {
      position: absolute;
      content: "";
      left: 0;
      z-index: -1;
      background-color: lighten(#000, 93.5%);
      border-color: lighten(#000, 93.5%);
    }
    &:before {
      top: 0;
      right: 0;
      bottom: 35px;
    }
    &:after {
      top: auto;
      right: -5px;
      bottom: 0;
      border-style: solid;
      border-width: 35px 35px 0 0;
      background-color: transparent;
      border-right-color: transparent;
    }
  }
}

如何做到这一点（沿着斜角移动阴影）？如果倾斜角是按照我的方式生成的，可以做到吗？由于relative 和absolute 的所有定位，我有点依赖这些类（至少我认为），我需要放置角徽章。

编辑：一些 HTML，如果你需要的话：

      <div class="swiper-slide">
        <div class="product-info-wrapper">
          <div class="product-info">
            <div class="row no-gutters">
              <div class="col-8">
                <strong class="text-uppercase">Amino Force</strong>
                <span class="product-info-link"><a href="#">Kurzinfo</a></span>
              </div>
              <div class="col-4 text-right">
                <span class="product-info-price">CHF 34.00</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="swiper-slide">
        <div class="product-info-wrapper">
          <div class="product-info">
            <div class="row no-gutters">
              <div class="col-8">
                <strong class="text-uppercase">Amino Force</strong>
                <span class="product-info-link"><a href="#">Kurzinfo</a></span>
              </div>
              <div class="col-4 text-right">
                <span class="product-info-price">CHF 34.00</span>
              </div>
            </div>
          </div>
          <div class="product-badge-wrapper">
            <div class="product-badge red">
              <div class="product-badge-content">
                new
              </div>
            </div>
          </div>
        </div>
      </div>

这只是整个 HTML 代码的一部分，可以在 codepen thingy 上找到。但我猜想，这将是唯一相关的部分。如果您需要更多，请告诉我！

EDIT2

此信息框的内容可以展开。如果我点击“Kurzinfo”，它会展开并显示更多信息。这不在 codepen 版本上，因为我在添加扩展功能之前创建了它。

【问题讨论】：

您可以使用图像作为框的背景，并在 Paint.NET 中制作图像 - 在图像中包含阴影
@AnishGoyal 这个product-info 东西的内容必须是灵活的，当我点击“Kurzinfo”时，它会扩展......将其添加到问题中。我觉得在这种情况下使用背景图片不起作用
如果你让一个绝对定位（给你的盒子相对定位）一个等效的盒子，但是黑色，z-index -1，作为一个伪阴影？你会失去传播，但我认为 CSS 不会让你做你想做的事。

标签： html css

【解决方案1】：

通常是不可能的，因为斜角是元素边框的一部分，不可见。

在图像中，如果蓝色区域变为白色，则您有一个斜角黑色区域，这是边框的一部分，在 css 中我们无法改变这一点。（根据需要更改）。

您可以通过在产品 div 中添加两个小 div 来遮盖阴影：

<div class="product-info-wrapper">
    <div class="coverShadow c1"></div>
    <div class="coverShadow c2"></div>
    ....

还有 CSS：

.coverShadow {
   position: absolute;
   z-index: 999;
   background-color: white;
   box-shadow: 0 0 14px white;
 }

 .coverShadow.c1 {
    width: 10px;
    height: 35px;
    background-color: white;
    bottom: 8px;
    right: -10px;
 }

 .coverShadow.c2 {
    width: 35px;
    height: 10px;
    bottom: 0px;
    right: 0;
 }

通过改变覆盖div的box shadow和width/height和right/bottom可以更平滑。

感谢创建倾斜角的好主意。

【讨论】：

感谢您的回答！好吧，很遗憾这似乎不起作用......你知道如果我以不同的方式创建倾斜是否有可能吗？我认为有一种渐变的方法......我不知道这会如何影响整体结果，因为正如我所说，我非常依赖这些元素的 relative 和 absolute 定位
请看我更新的答案，这将有助于更好地理解我的意思。并且在响应式和绝对定位方面没有任何问题。因为覆盖 div 与产品 div 及其所在位置有关，所以它们就在那里并且位于产品 div 的右下角。（对不起我的英语不好）
你知道如果我以不同的方式创建倾斜是否有可能吗？我认为有一种渐变的方法 ...我认为这是不可能的，盒子阴影是针对产品 div 的，与此没有任何关系，并且子元素的一块边框是不可见的（斜角）。

【解决方案2】：

截至 2022 年，您可以摆脱 @Farzin 的回答所建议的元素和样式 .coverShadow、.coverShadow.c1 和 coverShadow.c2。相反，对于 .product-info 元素替换

box-shadow: 0 5px 5px

与

filter:drop-shadow(0 0 5px #333)

（可能需要调整模糊量和颜色）。

drop-shadow() 将适应任何形状，而不仅仅是矩形。它也适用于most modern browsers。

【讨论】：