Estoy tratando de desarrollar un perfil pequeño que incluya una sombra para un div recortado. Así es como debería verse el perfil:

Ahora me estoy enfocando en las dos líneas inclinadas (una en el lado izquierdo y la otra en el lado derecho). Utilicé un div recortado que contenía otro div recortado para hacer este efecto de borde, y ahora espero agregarle sombra.

Sin embargo, el filtro: drop-shadow() no funciona aquí y está atenuado y tachado en la herramienta de inspección de Chrome. ¿Puede alguien decirme por qué y cómo deshacerse de este problema? (y si es posible, ¿alguien podría decirme cómo escalar la imagen aquí?) Aquí está mi código: HTML:

 <div class="decorative-container"> <div class="decorative-1-wrapper-shadow"> <div class="decorative-1-wrapper"> <div class="decorative-1"> </div> </div> </div> ... </div>

CSS (SCSS):

 .decorative-container { position: absolute; height: 100%; width: 100%; .decorative-1-wrapper-shadow { position: absolute; height: 100%; width: 250%; left: -58.5%; filter: drop-shadow( 0px 10px -4px rgba(colors.$grey, 0.3), -12px 0px -4px rgba(colors.$grey, 0.3) ); } .decorative-1-wrapper { position: absolute; height: 100%; width: 100%; clip-path: polygon(34.3% 0%, 79% 0%, 46.5% 100%, 0% 100%); background-color: colors.$navy_blue; .decorative-1 { position: absolute; left: 0.35%; width: 99.5%; height: 100%; background-color: colors.$white; clip-path: polygon(34.3% 0%, 79% 0%, 46.2% 100%, 0% 100%); } } }

Esto es lo que muestra la herramienta de inspección: