带CSS的向内透明箭头

Question

我需要使用CSS构建向内箭头，例如：

此处添加的三角形是具有以下css的伪元素：

section.intro:after {
    top: 100%;
    position: absolute;
    content: " ";
    pointer-events: none;
    width: 0;
    height: 0;
    margin-left: -.75em;
    bottom: -2em;
    left: 50%;
    border: 1.5em solid #000;
    border-color: transparent transparent #fff #fff;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-box-shadow: -5px 5px 5px 0 rgba(0,0,0,.25);
    box-shadow: -5px 5px 5px 0 rgba(0,0,0,.25);
}

那很好，但就我而言，我必须保留背景，因此我将border-color属性更改为：

border-color: rgba(255, 255, 255, 0);

这是结果：

那行得通，但是问题是，如果现在我决定将框阴影应用于该部分的所有底部，则会得到以下结果：

现在我有两个问题：

1）如何停止边框阴影与伪元素重叠；

2）如何去除阴影之外的背景：

编辑：整个部分的html代码：

<section class="background intro section-padding">
    <div class="content horizontal horizontal-even">
        <div class="small-center">
            <h1 class="h1 font-bebas-book">random text</h1>
            <p>random text</p>
            <a class="button button--with-shadow" style="display: block; width: 150px">Text</a>
        </div>
        <div class="small-center">
            {{>animation}}
        </div>
    </div>
</section>

背景只是该部分的background-image。

图案是一个小图标，重复出现在该部分的整个尺寸上。

Answer 1

您可以结合使用clip-path和drop-shadow()过滤器来获得此过滤器。剪切路径需要应用于伪元素以不剪切阴影：

.box {
  margin: 20px;
  height: 100px;
  position: relative;
  filter: drop-shadow(0 2px 4px red);
}

.box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url(https://picsum.photos/200/300?image=1069) center/cover;
  clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 30px), calc(50% + 30px) calc(100% - 30px), 50% 100%, calc(50% - 30px) calc(100% - 30px), 0 calc(100% - 30px));
}

<div class="box"></div>