html - 斜 Angular 上的盒子阴影

Question

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

这是信息框及其边 Angular 的 (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;
    }
  }
}

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

编辑:一些 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 版本上，因为我在添加扩展功能之前创建了它。

Answer 1

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

在图像中，如果蓝色区域变为白色，您会看到一个斜 Angular 黑色区域，这是边框的一部分，在 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可以更平滑。

感谢您提供创建斜 Angular 的好主意。