Предотвратить суммирование цвета при наложении полупрозрачных блоков

@pupanya · Регистрация: 11.11.2010

Студворк — интернет-сервис помощи студентам

Доброго времени суток! Собственно вопрос в заголовке. При уменьшении ширины экрана блоки накладываются друг на друга, и в месте наложения блоков друг на друга мы имеем более тёмный кусок. Можно ли как то решить при помощи только css и без использования внешних ресурсов (картинки с данным перфомансом)?

HTML5
1
<div></div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
div {
  position: relative;
  margin-top: 200px;
    width: 100%;
    height: 300px;
  background: rgba(41,41,41,0.2);
}
 
div::before {
  position: absolute;
  top: -100px;
  display: block;
    border-bottom: 100px solid rgba(41,41,41,0.2); 
    border-right: 400px solid transparent;
  content: '';
}
 
div::after {
  position: absolute;
  top: -200px;
  right: 0;
  display: block;
    border-bottom: 200px solid rgba(41,41,41,0.2);
    border-left: 500px solid transparent;
  content: '';
}

https://jsfiddle.net/oa63xok2/

@mrtoxas · 02.11.2016, 15:01

А полупрозрачность принципиальна?

@pupanya · 02.11.2016, 15:03 **[ТС]**

да, если бы не полупрозрачность, то наложение цветов было бы не видно и как следствие не было бы вопроса.

@Fedor92 · 02.11.2016, 16:39

Сообщение от pupanya

да, если бы не полупрозрачность, то наложение цветов было бы не видно и как следствие не было бы вопроса.

А подогнать треугольники, таким образом, чтобы они не пересекались не вариант?

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
div {
  position: relative;
  margin-top: 200px;
    width: 100%;
    height: 300px;
  background: rgba(41,41,41,0.2);
}
 
div::before {
  position: absolute;
  top: -100px;
  display: block;
    border-bottom: 100px solid rgba(41,41,41,0.2); 
    border-right: 280px solid transparent;
  content: '';
}
 
div::after {
  position: absolute;
  top: -200px;
  right: 0;
  display: block;
    border-bottom: 200px solid rgba(41,41,41,0.2);
    border-left: 380px solid transparent;
  content: '';
}

@pupanya · 03.11.2016, 12:27 **[ТС]**

Страница может как сужаться, так и расширяться. Необходимо было, чтоб треугольники всегда примыкали к краям. Указанные ширины треугольников просто для наглядности. На деле сумма ширин треугольников равняется 1905px, и при сужении окна они наезжают друг на друга.
как я понял без js/картинки тут никак. влепил svg

@mrtoxas · 03.11.2016, 12:38

Если пересечения треугольников не избежать, тогда да, svg лучший вариант

.

Новые блоги и статьи Все статьи Все блоги /
изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?	сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .
Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .	Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	02.11.2016, 15:01
	А полупрозрачность принципиальна? 0

@pupanya 4 / 4 / 3 Регистрация: 11.11.2010 Сообщений: 56
	02.11.2016, 15:03 [ТС]
	да, если бы не полупрозрачность, то наложение цветов было бы не видно и как следствие не было бы вопроса. 0

@pupanya 4 / 4 / 3 Регистрация: 11.11.2010 Сообщений: 56
	03.11.2016, 12:27 [ТС]
	Страница может как сужаться, так и расширяться. Необходимо было, чтоб треугольники всегда примыкали к краям. Указанные ширины треугольников просто для наглядности. На деле сумма ширин треугольников равняется 1905px, и при сужении окна они наезжают друг на друга. как я понял без js/картинки тут никак. влепил svg 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	03.11.2016, 12:38
	Сообщение было отмечено Fedor92 как решение Решение Если пересечения треугольников не избежать, тогда да, svg лучший вариант . 0

Предотвратить суммирование цвета при наложении полупрозрачных блоков

Решение