I am trying to create an inward arrow using CSS, similar to this example: https://i.sstatic.net/w3ray.png
The triangle shape is achieved using a pseudo-element with the following 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);
}
This solution works but I need to maintain the background, so I altered the border-color property like this:
border-color: rgba(255, 255, 255, 0);
The updated result can be seen here: https://i.sstatic.net/4kfGY.png
However, when I try to apply a box shadow to the entire bottom part of the section, it creates this effect: https://i.sstatic.net/DHQuu.png
Now I am faced with two issues:
1) How can I prevent the box shadow from covering the pseudo element?
2) How do I remove the excess background outside the shadow area?https://i.sstatic.net/hxPUD.png
EDIT: Here is the HTML code for the entire section:
<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>
The section background is simply a background-image.
The pattern consists of small icons repeating throughout the section.