html - CSS 给 Angular div 添加阴影

Question

我有以下代码:

.angled{
background-color: red;
height: 120px;
width: 100%;
  -webkit-clip-path: polygon(0 0, 1600px 0, 1600px 53%, 0 100%);
  clip-path: polygon(0 0, 1600px 0, 1600px 53%, 0 100%);
}

<div class="angled"></div>

我想在 div 的下边缘添加一个内嵌阴影。我怎样才能做到这一点？

Answer 1

您可以将倾斜的元素视为可以轻松应用嵌入阴影的背景:

.angeled {
  position:relative;
  height: 120px;
  overflow:hidden;
  z-index:0;
}
.angeled::before {
  content:"";
  position:absolute;
  z-index:-1;
  top:-20px;
  left:-20px;
  right:-20px;
  bottom:0;
  transform-origin:left;
  transform:skewY(-3deg);
  background:red;
  box-shadow:0 -2px 20px green inset
}

<div class="angeled"></div>

您也可以使用渐变来创建它:

.angeled {
  position:relative;
  height: 120px;
  background:
    linear-gradient(red,red) top/100% 50%,
    linear-gradient(to bottom right,
      red calc(50% - 15px),green calc(50% - 1px),
      transparent 50%) bottom left/150% 50%;
  background-repeat:no-repeat;
}

<div class="angeled"></div>