html - 倾斜边框上的框阴影 :after pseudoelement

Question

所以，我一直在寻找解决方案，但没有成功。我需要父 div 上的 box-shadow 来传递 :after 伪元素。

目前，框阴影仍然像矩形一样应用，而不是跟随边框的边缘，这会在 div 的末端呈现 Angular 。你可以在这里看到我在说什么:

https://codepen.io/thomasjost/pen/XBOjqm

这是我的 HTML:

<div class="total-tag">
  <h3 class="h-big-dollar-sign">$</h3>
  <h1 class="total">13,550</h1>
</div>

SCSS:

.total-tag {
    border-radius     : 6px 0 0 6px;
    background        : #EBEDEE;
    height            : 68px;
    width             : 15em;
    position          : relative;
    box-shadow: 0 1px 2px 0 rgb(0,0,0);
    display: flex;
    justify-content: flex-start;
    align-content: center;
    align-items: center;


    &:after {
            content                 : '';
            display                 : block;
            position                : absolute;
      top                           : 0;
      left            : 15em;
            border-style        : solid;
            border-color        : #EBEDEE transparent transparent transparent;
      border-width    : 68px 34px 0 0;
    box-shadow: 1px 1px 2px 0 rgb(0,0,0);
    }

  }


 .total {
    font-size: 38px;
    font-weight: 300;
    color: #64A31B;
    line-height: 1em;
    margin-top: 5px;
  }
  .h-big-dollar-sign {
    position: relative;
    left: inherit;
    top: inherit;
    margin-top: 5px;
    margin-left: 17px;
    font-size: 24px;
  }

如有任何帮助，我们将不胜感激。

Answer 1

你可以使用渐变背景来绘制背景并模拟阴影:

 &:after {
            content                 : '';
            display                 : block;
            position                : absolute;
      top                           : 0;
      left            : calc(15em - 2px);/* minus shadow's width */
      bottom          : 0;
      width           :36px;
      background: linear-gradient(to bottom right, #EBEDEE 49%, #000  50%, transparent calc(50% + 2px)  );/* draw bg and part of slanted shadow */
      box-shadow:0px -2px 2px -3px;/* top shadow is to be shawn too, give it a try */
    }

演示:

.total-tag {
  border-radius: 6px 0 0 6px;
  background: #EBEDEE;
  height: 68px;
  width: 15em;
  position: relative;
  box-shadow: 0 1px 2px 0 black;
  display: flex;
  justify-content: flex-start;
  align-content: center;
  align-items: center;
}
.total-tag:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: calc(15em - 2px);
  bottom: 0;
  width: 36px;
  background: linear-gradient(to bottom right, #EBEDEE 49%, #000 50%, transparent calc(50% + 2px));
  box-shadow: 0px -2px 2px -3px;
}

.total {
  font-size: 38px;
  font-weight: 300;
  color: #64A31B;
  line-height: 1em;
  margin-top: 5px;
}

.h-big-dollar-sign {
  position: relative;
  left: inherit;
  top: inherit;
  margin-top: 5px;
  margin-left: 17px;
  font-size: 24px;
}

<div class="total-tag">
  <h3 class="h-big-dollar-sign">$</h3>
  <h1 class="total">13,550</h1>
</div>