Как сделать падающую тень неправильной формы

Свойство  box-shadow прекрасно работает, когда нам требуется тень, отбрасываемая прямоугольником или любой другой фигурой, которую можно создать с помощью border-radius (несколько примеров вы найдете здесь). Однако от него гораздо меньше пользы, когда мы работаем с псевдоэлементами или другими полупрозрачными вариантами декорирования, потому что  box-shadow бессовестно игнорирует прозрачность. Приведу несколько примеров:‰ полупрозрачные изображения, фоновые изображения и рамки, созданные с применением  border-image (например, винтажная рама с позолотой); ‰ штрихпунктирные рамки, рамки с точечным пунктиром и полупрозрачные рамки без фона (или со значением  background-clip , отличным от  border-box ); ‰ облачко с текстом, указатель для которого создан с помощью псевдоэлемента; ‰ скошенные углы, аналогичные тем, которые мы учились делать в секрете "Как срезать углы на css"; ‰ большинство эффектов загнутого уголка, включая описанный далее в этой главе; ‰ контуры, создаваемые с помощью  clip-path , например ромбовидные изображения из секрета «Как сделать ромб на css». Читать далее