Как сделать прозрачный элемент перекрывающим другие элементы?

Question

Я пытаюсь создать элемент, который имеет тот же цвет, что и фон (даже если фон имеет несколько цветов), но он по-прежнему перекрывает некоторые элементы.

#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;
}

Как видите, есть две стрелки. Они одинакового размера, но один из них расположен на 10 пикселей сверху и прозрачен. Я хочу, чтобы #arrow_up2 перекрывался #arrow_up с цветом фона. Самым простым решением было бы установить цвет #arrow_up2 на тот же цвет, что и цвет фона. Однако, как я уже сказал, фон является динамическим и может иметь или не иметь более одного цвета.

РЕДАКТИРОВАТЬ

HTML:

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

Дополнительный CSS:

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

Изображений:

Изображение одно показывает то, что я хочу. Эти стрелки используются в фотогалерее, поэтому под ними текут изображения. Как вы можете видеть, если красное изображение останавливается под стрелкой, оно показывает #arrow_up2, который помогает сформировать форму. Я знаю, что могу просто создать стрелку в фотошопе, но я хотел знать, возможно ли это в css, как это.

Я хочу, чтобы #arrow_up2 имел тот же цвет, что и фон, и перекрывался #arrow_up одновременно. Должна быть некоторая настройка прозрачности, которая позволяет вам наследовать цвет фона и элементы перекрытия.

Answer 1

Невозможно накрыть элемент элементом с прозрачным фоном - всегда виден элемент под ним. Вы можете попробовать это

#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;
}

(давайте настроим размеры, чтобы сделать правильные формы).

В любом случае, я предпочитаю использовать простой png или рисование с помощью js canvas;)

Answer 2

Вы можете сделать это с помощью некоторого JavaScript.

Сначала вы получите цвет фона:

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

Затем получите объект со стрелкой, цвет которого нужно изменить:

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

И просто измени это!

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

Рабочий пример здесь.