我很难在使用边框属性生成的箭头轮廓周围添加框阴影。有没有办法使框形阴影的形状与箭头相同,而不是方形框?
这里是jsfiddle。
HTML:
<a class="bx-prev"></a>
<a class="bx-next"></a>
CSS:
.bx-prev, .bx-next {
border-right: 15px solid green;
border-bottom: 15px solid green;
width: 35px;
height: 35px;
top: 200px;
box-shadow: 0 0 10px 0 rgba(0,0,0,0.5);
}
.bx-prev {
transform: rotate(135deg);
position: absolute;
left: 220px;
}
.bx-next {
transform: rotate(-45deg);
position: absolute;
left: 320px;
}
答案 0 :(得分:3)
尝试一下。
编辑!
.bx-prev, .bx-next {
border-right: 15px solid green;
border-bottom: 15px solid green;
width: 35px;
height: 35px;
top: 200px;
-webkit-filter: drop-shadow(0px 0px 2px rgba(0,0,0,.7));
filter: drop-shadow(0px 0px 2px rgba(0,0,0,.7));
}
.bx-prev {
transform: rotate(135deg);
position: absolute;
left: 220px;
}
.bx-next {
transform: rotate(-45deg);
position: absolute;
left: 320px;
}
<a class="bx-prev"></a>
<a class="bx-next"></a>
答案 1 :(得分:1)
您可以通过使用伪元素创建相同的箭头来尝试模糊滤镜:
.bx-prev,
.bx-next {
top: 200px;
position:relative;
}
.bx-prev {
transform: rotate(135deg);
position: absolute;
left: 220px;
}
.bx-next {
transform: rotate(-45deg);
position: absolute;
left: 320px;
}
/*the arrow*/
.bx-prev:before,
.bx-next:before,
.bx-prev:after,
.bx-next:after{
content:"";
position:absolute;
border-right: 15px solid green;
border-bottom: 15px solid green;
width: 35px;
height: 35px;
}
/*the shadow*/
.bx-prev:after,
.bx-next:after{
border-color: red;
z-index:-1;
filter:blur(5px);
}
<a class="bx-prev"></a>
<a class="bx-next"></a>