Создание фоновый фигур

@thesanchess · Регистрация: 29.04.2019

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

Здравствуйте, подскажите пожалуйста, как можно создать такой эффект?

@novichek_1905 · 23.06.2019, 15:28

thesanchess, используйте наложение другого изображения, будь-то svg, или png

@thesanchess · 23.06.2019, 15:32 **[ТС]**

Так и сделал, но хотелось более интересным путем пойти, используя clip-path к примеру.

Пока что варианта кроме наложения другого изображения не нашел(

@AlexZaw · 23.06.2019, 15:39

thesanchess, можно так:

HTML5
1
2
3
4
<div class="wrap">
  <img src="http://placekitten.com/1000/200" alt="">
  <div class="shadow"></div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.wrap{
  position: relative;
  display: inline-block;
  color: rgb(0,128,128);
}
img{
  vertical-align: top;
}
.shadow{
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: radial-gradient(100% 200% at -5% 50% , transparent, transparent 50%, rgba(9,17,118,.7) 50%, rgba(9,17,118,.7));
}

@thesanchess · 23.06.2019, 15:44 **[ТС]**

Интересный вариант, спасибо

@novichek_1905 · 23.06.2019, 16:46

Не по теме:

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

но хотелось более интересным путем пойти

Делайте так, что бы наверняка было хорошо, и работало предсказуемо) Интересный вариант, не всегда хороший...

Новые блоги и статьи Все статьи Все блоги /
Мысли в слух. Про "навсегда". kumehtar 16.04.2026 Подумалось тут, что наверное очень глупо использовать во всяких своих установках понятие "навсегда". Это очень сильное понятие, и я только начинаю понимать край его смысла, не смотря на то что давно. . .	My Business CRM MaGz GoLd 16.04.2026 Всем привет, недавно возникла потребность создать CRM, для личных нужд. Собственно программа предоставляет из себя базу данных клиентов, в которой можно фиксировать звонки, стадии сделки, а также. . .	Знаешь почему 90% людей редко бывают счастливыми? kumehtar 14.04.2026 Потому что они ждут. Ждут выходных, ждут отпуска, ждут удачного момента. . . а удачный момент так и не приходит.	Фиксация колонок в отчете СКД Maks 14.04.2026 Фиксация колонок в СКД отчета типа Таблица. Задача: зафиксировать три левых колонки в отчете. Процедура ПриКомпоновкеРезультата(ДокументРезультат, ДанныеРасшифровки, СтандартнаяОбработка) / / . . .
Настройки VS Code Loafer 13.04.2026 { "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .	Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .	Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .

@thesanchess 0 / 0 / 0 Регистрация: 29.04.2019 Сообщений: 7

	Создание фоновый фигур 23.06.2019, 14:10. Показов 1368. Ответов 5 Метки css, html (Все метки) Здравствуйте, подскажите пожалуйста, как можно создать такой эффект? Миниатюры 0

@novichek_1905 469 / 334 / 144 Регистрация: 16.02.2018 Сообщений: 930
	23.06.2019, 15:28
	thesanchess, используйте наложение другого изображения, будь-то svg, или png 0

@thesanchess 0 / 0 / 0 Регистрация: 29.04.2019 Сообщений: 7
	23.06.2019, 15:32 [ТС]
	Так и сделал, но хотелось более интересным путем пойти, используя clip-path к примеру. Пока что варианта кроме наложения другого изображения не нашел( 0

@thesanchess 0 / 0 / 0 Регистрация: 29.04.2019 Сообщений: 7
	23.06.2019, 15:44 [ТС]
	Интересный вариант, спасибо 0

Создание фоновый фигур

Решение