Elementos recortados y sombras: clip-path + box-shadow 15.9.17

Elementos recortados y sombras: clip-path + box-shadow

Al declarar la propiedad clip-path [ver recortes CSS] a un elemento se fuerza a que el sobrante (lo que queda excluido del polígono formado por los puntos indicados en su valor) no se muestre y tampoco sea accesible.

Es su razón de ser y lo que la hace tan jugable. Y el hecho de que las partes recortadas queden inaccesibles (una suerte de display: none) evita también que el usuario no pueda interactuar con esas partes del elemento [ver las demos de este post]

Sin embargo hay situaciones que esto se vuelve en contra. Como por ejemplo el mostrar parte del outline o de la sombra del elemento.

Un caso particular de esta situación es recurrir a la propiedad CSS clip-path para lograr figuras no rectangulares, como triángulos, que además necesitemos que muestren algún tipo de sombra para mantener la coherencia del diseño. Como en la imagen inicial del post.

El lograrlo no reviste mayor misterio. Basta recordar una particularidad de las coordenadas o puntos que admite el valor de la propiedad CSS clip-path:

Tanto en Css como en SVG el punto o coordenada 0 0 corresponde a la esquina superior izquierda. Hacia la derecha aumenta el valor de la coordenada X y hacia abajo el de la Y. El punto 100% 100% o 1 1 es la esquina inferior derecha del elemento al que aplicamos la propiedad clip-path

Pero el rango puede ser mayor de 1 (100%) o menor de 0 (0%). Si eso ocurre el punto se coloca fuera del viewBox del SVG, por lo que el segmento de línea "sale" fuera del elemento quedando truncada esa parte del polígono en el límite del viewBox. Como en la figura siguiente.

Triángulos con clip-path y sombra exterior

En esta demo el triángulo lo baso en un pseudoelemento cuadrado (ancho = alto) de un tamaño relativo al viewport, al que posiciono de forma absoluta centrado en el borde superior de su padre:

.el::before { background: inherit; z-index: 1; content: ''; position: absolute; left: 50%; top: 0; width: 5vmin; height: 5vmin; transform: translate(-50%, -50%) rotate(45deg); }

El código CSS previo ya te imaginas, y si no mira la imagen adjunta, que genera un rombo con sus cuatro lados iguales, y colocadito allí donde quiero que aparezca dibujado mi triángulo.

El paso siguiente será hacer que el sobrante, la parte que se superpone al padre por quedar dentro de él, desaparezca y no interfiera con el resto.

Para ello basta con hacer uso de la propiedad CSS clip-path dejando un pequeño sobrante (espacio lateral) para que la sombra sea visible:

.el::before { clip-path: polygon(-10% -10%, 102% 0%, 0% 102%); box-shadow: -1px -3px 3px rgba(0,0,0,.2); border-radius: 1vmin 0 0 0; }

El valor de las coordenadas menores de 0% o mayores de 100% está en función del tamaño de la sombra que necesitemos mostrar.

Todo junto lo puedes ver y jugar en el siguiente pen:

See the Pen oeJyZa by Kseso (@Kseso) on CodePen.

Kseso

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso