html - 如何创建一个带有切角和阴影的盒子?(盒装网站设计)
问题描述
我正在做一个网站,我需要剪掉主体的左上角。之后我想在主体上应用阴影。这个阴影不应该绕过原来的盒子,它应该跟随主体并带有新的切角——我为此使用了阴影。
我尝试使用渐变背景,但无论我尝试什么,我的标题要么与主体重叠,要么阴影不起作用
我目前的尝试是这样的: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;
}
我的问题是标题没有被切断,所以它只是重叠。我尝试使用 z-index 但即使在每个元素上使用 position:absolute / relative 也无法使其工作。我查看了很多不同的想法,但我没有发现任何可以处理与我的标题相同的问题。
我需要改变什么来切断主体和头部的角落,然后得到一个工作阴影?
编辑:我的解决方案
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;
}
解决方案
你在哪里很近!
如果您使用剪辑路径,则可以剪切框的标题和主要部分。然后,当您在主要元素上设置阴影过滤器时,您应该获得所需的样式。
#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>
推荐阅读
- visual-studio - 如何通过 Bridge to Kubernetes 使用托管标识?
- android - java.lang.RuntimeException:无法启动活动 ComponentInfo{at.mksquad.swapit/at.mksquad.swapit.ui.screenflow.main.MainActivity}?
- microservices - 使用 envoy 代理启用跟踪 id 的配置是什么?
- command-line - 卷曲到 Artifactory 时声明用户和密码的语法是什么
- java - 当我在 Jenkins 中运行构建时,我得到了这个错误:在 PATH 中找不到 firefox 二进制文件。确保已安装 Firefox
- python - 选择不标准化分层贝叶斯回归(pymc3)中的自变量时如何缩放超先验
- reactjs - Typescript 努力在 .d.ts 文件中创建类型声明
- laravel - 此集合实例上不存在 Laravel8 属性 [Eng2]
- javascript - Django,Javascript:传递数据会禁用应用程序内的功能
- javascript - 在 React/ES6 中将对象键迭代到数组