Css - некоторые UX проблема с элементами перекрывающихся

Question

На старте, это общий вопрос без образца кода, как я смотрю на идею, как архивировать это:

У меня есть 3 абсолюта расположены элементы, которые перекрывают каждые Другие. Все они имеют цвет фона, например красный.

Теперь div1 перекрывает div2, поэтому они имеют общую область, и пользователь не может видеть, когда первые Дивы концы, и начинается secod ...

Как я рисовать на изображение ниже, я могу Ставить непрозрачность этого divs, поэтому пользователь может видеть некоторые различия, но это может быть не 100% хорошее решение.

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

Спасибо за идеи:)

Answer 1

Вы можете установить непрозрачность цвета фона с помощью RGBA:

.div { background-color: rgba(255,0,0,0.8); } 

Это берет свой красный, зеленый затем голубые цвета, а затем непрозрачность (от 0 до 1 в десятичной форме). Вы также можете использовать opacity: 0.8, но это уменьшит непрозрачность всего div, включая его границу.

Answer 2

Еще одна идея - не использовать только прозрачный цвет фона, а прозрачные линии и хеши в разных направлениях. Немного похоже на изображение ниже.

Но вы можете сделать линии немного прозрачными и под разными углами и цветами. Таким образом, разница в divs будет более элегантной. И не путаница цветов.