如何创建一个带有切角和阴影的盒子？（盒装网站设计）

Question

我正在做一个网站，我需要剪掉主页面的左上角 body。之后我想在主要 body 上应用阴影。这个阴影不应该绕过原来的盒子，它应该跟随主 body 和新的切角 - 我为此使用了 drop-shadow。

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

我目前的尝试是这样的：https://codepen.io/Sophvy/pen/MWgMZzG

HTML:

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

  </header>
  <main>
  </main>

</div>

CSS:


#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;
}

我的问题是 header 没有被切断，所以它只是重叠。我尝试使用 z-index 但即使在每个元素上使用 position:absolute / relative 也无法使其正常工作。我看了很多不同的想法，但我没有找到任何可以解决我 header.

遇到的相同问题的想法

我需要更改什么才能切掉主要 body 和 header 的角，然后得到工作阴影？

编辑：我的解决方案

HTML:


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

CSS:

#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;
}

Answer 1

你很亲近！

如果您使用 clip-path，您可以同时切割 header 和盒子的主要部分。当您随后在主要元素上设置 drop-shadow 过滤器时，您应该获得所需的样式。

#main1 {
  height:500px;
  width:500px;
  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;
}

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

    <main>
    </main>
  </div> 
</div>

如何创建一个带有切角和阴影的盒子？（盒装网站设计）

How to create a box with cut off corner and shadow? (Boxed Website design)

html

css

shadow

如何创建一个带有切角和阴影的盒子？ （盒装网站设计）

How to create a box with cut off corner and shadow? (Boxed Website design)

html

css

shadow

如何创建一个带有切角和阴影的盒子？（盒装网站设计）