CODEWITHSUNDEEP
htmlcss
ste
ste

Reputation: 3259

Inward, transparent arrow with CSS

I need to build an inward arrow with CSS, something like this:enter image description here

Here the triangle added is 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);
}

That works fine but in my case I have to preserve the background, so I changed the border-color property to this:

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

This is the result: enter image description here

That works, but the problem is that if now I decide to apply the box shadow to all the bottom part of the section I obtain the following result: enter image description here

Now I have two problems:

1) How can I stop the border shadow to overlap the pseudo element;

2) How to remove the background outside the shadow:enter image description here

EDIT: html code of 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 background is simply a background-image on the section.

The pattern is a small icon that repeats through the entire size of the section.

Upvotes: 2

Views: 774

Answers (1)

Temani Afif
Temani Afif

Reputation: 272789

You can combine clip-path and drop-shadow() filter to obtain this. The clip-path need to be applied to a pseudo element to not cut the 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>

Upvotes: 2

Related Questions