我正在尝试在块上绘制对角线阴影,这就是我想要的:

css - 对 Angular 背景与阴影-LMLPHP

用阴影和棍子绘制一个常规块不是问题,这是我现在所做的:

body {
  background: #EDF0F4;
}

.content-block {
  position: relative;
  background: white;
  padding: 16px;
  margin: 32px;
  box-shadow: -7px 8px 16px 0 rgba(55,70,95,0.07);
  border-radius: 8px;
  height: 200px;
}

.content-block:before {
      content: '';
      height: 70px;
      width: 12px;
      background: linear-gradient(332.97deg, #54EFAD 0%, #23FCCA 100%, #1AFFD8 100%);
      position: absolute;
      right: 0;
      top: 0;
      border-top-right-radius: 8px;
      border-bottom-left-radius: 8px;
    }
        <div class="content-block">

        </div>


我试图搜索如何在对角线处绘制右边框,但是没有成功,大多数答案都不包括阴影。

最佳答案

您可以考虑在伪元素和阴影过滤器上倾斜:

body {
  background: #EDF0F4;
}

.content-block {
  position: relative;
  background: white;
  padding: 16px;
  margin: 32px 100px 32px 32px;
  filter:drop-shadow(-7px 8px 16px  red);
  border-radius: 8px 0 0 8px ;
  height: 200px;
}

.content-block:before {
  content: '';
  position: absolute;
  width: 100px;
  top:0;
  bottom:0;
  left:100%;
  background:
    /*To simulate the radius of the gradient*/
    radial-gradient(farthest-side at top right,transparent 98%,#fff 100%) top 62px right 4px /8px 8px no-repeat,
    /**/
    linear-gradient(332.97deg, #54EFAD 0%, #23FCCA 100%, #1AFFD8 100%) top right/12px 70px no-repeat,
    #fff;
  border-radius:0 8px 8px 0;
  transform:skew(-20deg);
  transform-origin:top;
}
<div class="content-block">

</div>

10-07 18:58
查看更多