如何为区块实现带阴影的对角线边框效果？

你当前的代码已经实现了右上角的渐变斜角条，但这个伪元素没有跟随父元素的阴影效果，导致视觉上脱节。下面给你两种简单可行的解决方案，让渐变条的阴影和区块阴影完美融合：

方法1：用filter: drop-shadow直接给伪元素加阴影 #

这种方法最简洁，drop-shadow会跟随元素的实际形状（包括圆角）生成阴影，只需要调整参数和父元素阴影匹配即可：

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; 
  overflow: visible; /* 确保伪元素阴影不被父元素裁剪 */
}
.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;
  /* 添加匹配的阴影，偏移量和父元素保持一致 */
  filter: drop-shadow(-7px 8px 16px rgba(55,70,95,0.07));
}

方法2：用额外伪元素模拟阴影层 #

如果需要兼容不支持filter的旧浏览器，可以用:after伪元素做一个和渐变条形状一致的阴影层，通过偏移和模糊实现效果：

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; 
  overflow: visible;
}
.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;
  z-index: 1; /* 把渐变条放在阴影层上方 */
}
.content-block:after {
  content: '';
  height: 70px;
  width: 12px;
  background: rgba(55,70,95,0.07);
  position: absolute;
  right: -2px; /* 向右偏移模拟阴影扩散 */
  top: 2px; /* 向下偏移匹配父元素阴影方向 */
  border-top-right-radius: 8px;
  border-bottom-left-radius: 8px;
  filter: blur(4px); /* 模糊处理模拟阴影质感 */
}

小说明 #

父元素的box-shadow只会作用于自身的边框盒子，不会自动包含伪元素，所以必须单独给渐变条添加阴影效果。两种方法里，drop-shadow更省心，因为它能自动贴合元素的圆角和形状，不需要手动调整阴影层的细节。

内容的提问来源于stack exchange，提问作者Yoleth