如何将 filter:blur 与剪辑路径一起使用?
How to use filter:blur with clip-path?
我正在尝试向 clip-path
六边形添加阴影。
由于通常的 box-shadow
(和 filter:drop-shadow()
)不适用于 clip-path,我试图在下面使用更大的伪元素来伪造效果。
该方法取自 here,在一个更简单的示例中工作得很好:
body {
background-color: gray;
}
.rectangle {
margin: 10%;
position: absolute;
background: white;
width: 80%;
padding-top: 25%;
}
.rectangle::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
filter: blur(10px) brightness(20%);
transform: scale(1.1);
z-index: -1;
background-color: black;
}
<div class="rectangle">
</div>
然而,使用与剪切路径六边形完全相同的方法失败。
这个粗略的草图显示了预期的效果:
相反,我得到:
body {
background-color: gray;
}
.hexagon {
width: 20%;
padding-top: 25%;
-webkit-clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
-webkit-shape-outside: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
position: absolute;
background: rgb(0, 229, 154);
margin: 10%;
}
.hexagon::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(10px) brightness(20%);
transform: scale(2.5);
z-index: -1;
background-color: black;
}
<div class="hexagon">
</div>
两个问题:
- 我怎样才能使这个工作?
- 为剪辑路径元素伪造阴影的更好方法是什么?
你需要相反的布局。
容器(在本例中为基本元素)必须应用滤镜,内部(在本例中为伪)必须有剪辑 属性:
body {
background-color: gray;
}
.hexagon {
width: 20%;
padding-top: 25%;
filter: drop-shadow(10px 10px 10px red);
position: absolute;
margin: 10%;
}
.hexagon::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: scale(2.5);
z-index: -1;
-webkit-clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
-webkit-shape-outside: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
background: rgb(0, 229, 154);
}
<div class="hexagon">
</div>
我正在尝试向 clip-path
六边形添加阴影。
由于通常的 box-shadow
(和 filter:drop-shadow()
)不适用于 clip-path,我试图在下面使用更大的伪元素来伪造效果。
该方法取自 here,在一个更简单的示例中工作得很好:
body {
background-color: gray;
}
.rectangle {
margin: 10%;
position: absolute;
background: white;
width: 80%;
padding-top: 25%;
}
.rectangle::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
filter: blur(10px) brightness(20%);
transform: scale(1.1);
z-index: -1;
background-color: black;
}
<div class="rectangle">
</div>
然而,使用与剪切路径六边形完全相同的方法失败。 这个粗略的草图显示了预期的效果:
相反,我得到:
body {
background-color: gray;
}
.hexagon {
width: 20%;
padding-top: 25%;
-webkit-clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
-webkit-shape-outside: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
position: absolute;
background: rgb(0, 229, 154);
margin: 10%;
}
.hexagon::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(10px) brightness(20%);
transform: scale(2.5);
z-index: -1;
background-color: black;
}
<div class="hexagon">
</div>
两个问题:
- 我怎样才能使这个工作?
- 为剪辑路径元素伪造阴影的更好方法是什么?
你需要相反的布局。
容器(在本例中为基本元素)必须应用滤镜,内部(在本例中为伪)必须有剪辑 属性:
body {
background-color: gray;
}
.hexagon {
width: 20%;
padding-top: 25%;
filter: drop-shadow(10px 10px 10px red);
position: absolute;
margin: 10%;
}
.hexagon::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: scale(2.5);
z-index: -1;
-webkit-clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
-webkit-shape-outside: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
background: rgb(0, 229, 154);
}
<div class="hexagon">
</div>