Тень для clip-path

Решается такая задача просто, нужно обернуть эту область в тег с фильтром.

Пример:

HTML:

<div class="clip-shadow">
	<div class="clip"><div>	
<div>

<div>

CSS:

.clip-shadow {	
	filter: drop-shadow(10px 10px 24px rgba(0, 0, 0, 0.8));	
}	
.clip  {
	background-image: url('photo.jpg');
	background-size: cover;
	height: 460px;
	clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%,  100% 20%, 80% 0%);
}

.clip-shadow {

filter: drop-shadow(10px 10px 24px rgba(0, 0, 0, 0.8));

}

.clip {

background-image: url('photo.jpg');

background-size: cover;

height: 460px;

clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 100% 20%, 80% 0%);

}

Опубликовано: 17.07.2020
Рубрики: Вкладки, блоки и списки - простые решения
Метки: CSS
5795 просмотров

Смотрите также:

Блок из 4-х фотографий

Оформление блок-секции из четырех фотографий на CSS

Внутренний border-radius у блока

Имитация закругленных углов, как у css-свойства border-radius, но с отрицательным радиусом

Обновление фрейма по клику

Простой пример, как обновить (перезагрузить) фрейм <iframe> по клику или другом действии

Добавить комментарий:

Ваш комментарий отправлен!