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

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

Зигзагообразный бордюр на CSS

Верхний и нижний бордюр зигзагом с использованием линейного градиента

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

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

Заголовок, перекрывающий блок с рамкой

Заголовок на прозрачном фоне, перекрывающий блок с рамкой на CSS

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

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