Html 如何创建具有截断角和阴影的长方体？（盒装网站设计）

我在一个网站上工作，我需要剪掉主体的左上角。 之后，我想在主体上应用阴影。这个阴影不应该绕过原来的盒子，它应该跟随主体，带有新的切掉的角——我使用了drop shadow

我尝试使用渐变背景，但无论我尝试什么，我的标题要么与主体重叠，要么阴影不起作用

我目前的尝试是：

HTML:

我在这里的问题是，标题没有被切断，所以它只是重叠。 我尝试使用z-index，但即使在每个元素上使用position:absolute/relative，也无法使其工作。我看了很多不同的想法，但我没有发现任何能解决我的头球问题的方法

我需要做什么改变来切断主体和头部的角落，然后得到一个工作阴影

编辑：我的解决方案

HTML:

你离这里很近

如果使用剪辑路径，则可以剪切框的标题和主体部分。 然后在主元素上设置下拉阴影过滤器时，应获得所需的样式

#main 1{
高度：500px；
宽度：500px；
滤镜：投影（0px 0px 10px蓝色）；
}
#包裹{
宽度：500px；
高度：500px；
背景：线性梯度（135度，透明70像素，绿色0）；
剪辑路径：多边形（25%0，100%0，100%100%，01100%，025%）；
位置：绝对位置；
}
标题{
高度：55px；
最大宽度：100%；
背景色：#eee；
位置：相对位置；
}

使用剪辑路径，而不是渐变。。渐变不会剪切，它将使用透明的颜色。谢谢你的回答。我可以看到它是如何工作的，但遗憾的是我不能将它用于我的网站。我制作了一个新的测试代码，它更清晰地代表了我的实际网站布局：我有点困惑为什么这不起作用。因为唯一真正改变的是我有一个背景，然后盒子在中间？”Soufy是因为“MaM1”是你的主要容器？我真的不明白你为什么不在代码中使用这个方法，对不起。这个方法唯一需要做的就是在header和main周围有两个div。外部div需要有过滤器，内部div需要有clip path属性。oki我发现这只是一些小的逻辑错误。谢谢你的帮助：）

<div id ="main1">
  <div id ="wrap"></div>
  <header>

  </header>
  <main>
  </main>

</div>

#main1 {
  height:500px;
  width:500px;
  position:relative;
}
#wrap {
  width:500px;
  height:500px;
  background: linear-gradient(135deg, transparent 70px,green 0);
  filter: drop-shadow(0px 0px 10px blue);
  position:absolute;
}

header {
  height:55px;
  max-width:100%;
  background-color:#eee;
  position: relative;
}

<div id="background">
  <div id ="main1">
    <div id ="wrap">
      <header>
        header
      </header>
      <main>
      main
      </main>
    </div>
  </div>
</div>

#background {
  height:500px;
  width:600px;
  padding-top: 5px;
  background-color:#bbb;
  padding-bottom: 5px;
}

#main1 {
  margin: 10px auto;
  width: 90%;
  height:400px;
  text-align:right;
  filter: drop-shadow(0px 0px 10px blue); 
}
#wrap {
  width:500px;
  height:500px;
  background: linear-gradient(135deg, transparent 70px,green 0);
  clip-path: polygon(25% 0, 100% 0, 100% 100%, 0 100%, 0 25%);
  position:absolute;
}

header {
  height:55px;
  max-width:100%;
  background-color:#eee;
  position: relative;
}