Тень для 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%);

}

Подписывайтесь на публикации Там наиболее интересные заметки без рекламы и другой ненужной информации.

Протестировать на мобильном Сгенерировать QR-код для перехода на эту страницу с телефона

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

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

Шаблоны сеток на CSS Grid

Несколько примеров расположения блоков с использованием сеток на CSS Grid

Длинная тень от блоков

Использование линеарного градиента для создания длинной тени

Полупрозрачный бордюр на CSS

Создание полупрозрачных бордюров с использованием псевдоклассов :before и :after

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

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