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

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

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

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

Masonry сетка на CSS

Вариант каменной кладки блоков и изображений без использования JS

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

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

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

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