Тень для 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
8232 просмотра

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

Случайный цвет текста и фона

Простое решение на JS, которое задает случайный цвет для фона или текста

Эффект радиоволны на кнопке или блоке

Круглые волны, которые расходятся по всей странице от кнопки или блока

Предупредительные сообщения на CSS

Оформление предупредительных сообщений success, warning, danger и info

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

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