CODEWITHSUNDEEP
csstransparency
ondrejba
ondrejba

Reputation: 281

How to make an transparent element overlap other elements?

I am trying to create an element which has the same color as the background (even if the background has multiple colors) but it still overlaps some elements.

#arrow_up {
   position: absolute;
   top: 0;
   border-left: 20px solid transparent;
   border-right: 20px solid transparent;
   border-bottom: 20px solid rgba(0, 0, 0, 0.5);
   z-index: 3;
}

#arrow_up2 {
   position: absolute;
   top: 10px;
   border-left: 20px solid transparent;
   border-right: 20px solid transparent;
   border-bottom: 20px solid transparent;
   z-index: 4;
}

As you can see, there are two arrows. They are the same size but one of them is positioned 10px from the top and is transparent. What I want to do is to have the #arrow_up2 overlap #arrow_up with the background color. The easiest solution would be to set the #arrow_up2's color to the same color as the the background color. However, as I said, the background is dynamic and it may or may not have more than one color.

EDIT

HTML:

<div class="nav">
    <div id="arrow_up"></div><div id="arrow_up2"></div>
</div>

Additional CSS:

.nav {
   position: absolute;
   width: 450px;
   height: 600px;
}

Images:

Good arrow.

Bad arrow.

Image one shows what I want. These arrows are used in a photo gallery so there are images flowing under them. As you can see, if a red image stops under the arrow, it shows the #arrow_up2 which helps to form the shape. I know that I can simply create an arrow in photoshop but I wanted to know if it was possible in css like this.

I want the #arrow_up2 to have the same color as the background and overlap #arrow_up at the same time. There must be some transparency setting which lets you inherit the background color and overlap elements.

Upvotes: 3

Views: 5235

Answers (2)

KaroCodes
KaroCodes

Reputation: 256

You can do it using some javascript.

First you get background color:

var bg = window.getComputedStyle(document.body).backgroundColor;

Then get your arrow object which color should be changed:

var arrow = document.getElementById("arrow_up2");

And just change it!

arrow.style.borderBottom = "20px solid " + bg;

Working example here.

Upvotes: 0

damian004
damian004

Reputation: 268

It's impossible to cover element by element with transparent background - always visible is element under him. You can try this

#arrow_up {
   position: absolute;
   top: 0;
   border-left: 20px solid transparent;
   border-right: 20px solid transparent;
   border-bottom: 20px solid #ccc;
   z-index: 3;
}
#arrow_up2 {
   position: absolute;
   top: 10px;
   left: 18px;
   border-left: 10px solid transparent;
   border-right: 10px solid transparent;
   border-bottom: 10px solid #fff;
   z-index: 4;
}

(let's customize sizes to make regular shapes).

Anyway, I prefer to use simple png or drawing with js canvas ;)

Upvotes: 1

Related Questions