Photoshop Question posted in
The official user guide can be found here.

How to make an transparent element overlap other elements? – Photoshop

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.

Tags:

2

Answers


  1. 0

    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 😉

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search