Question

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

这是信息框及其角落的（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中找到。但我猜想，这将是唯一相关的部分。如果您需要更多，请告诉我！

EDIT2

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

Answer 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的框阴影和宽度/高度和右/底，它可以更加流畅。

感谢创造倾斜角落的好主意。

角形角落上的盒子阴影

1 个答案: