Digamos que está tratando de lograr un efecto de diseño en el que se cortan las esquinas de un elemento. tal vez eres un fanático de Battlestar Galactica? O tal vez simplemente te guste el efecto inusual que tiene, ya que evita parecer un rectángulo típico.
Sospecho que hay muchas maneras de hacerlo. Ciertamente, podría usar múltiples fondos para colocar imágenes en las esquinas. También podría usar una forma SVG flexible colocada en el fondo. Apuesto a que también hay una forma exótica de usar gradientes para lograrlo.
Pero me gusta la idea de simplemente tomar unas tijeras y cortar las esquinas malditas. Esencialmente podemos hacer precisamente eso gracias a clip-path. Podemos usar el polygon() función, proporciónele una lista de X y Y coordenadas y recortar lo que está fuera de ellos.
Mira lo que sucede si enumeramos tres puntos: en el medio arriba, abajo a la derecha, abajo a la izquierda.
.module {
clip-path:
polygon(
50% 0,
100% 100%,
0 100%
);
}
En lugar de solo tres puntos, enumeremos los ocho puntos necesarios para nuestras esquinas con muescas. Podríamos usar píxeles, pero eso sería peligroso. Probablemente no sepamos realmente el ancho o alto en píxeles del elemento. Incluso si lo hiciéramos, podría cambiar. Entonces, aquí está usando porcentajes:
.module {
clip-path:
polygon(
0% 5%, /* top left */
5% 0%, /* top left */
95% 0%, /* top right */
100% 5%, /* top right */
100% 95%, /* bottom right */
95% 100%, /* bottom right */
5% 100%, /* bottom left */
0 95% /* bottom left */
);
}
Eso está bien, pero observe cómo las muescas no están en ángulos perfectos de 45 grados. Eso es porque el elemento en sí no es un cuadrado. Eso empeora cuanto menos cuadrado es el elemento.
Podemos usar el calc() función para arreglar eso. Usaremos porcentajes cuando sea necesario, pero solo restamos de un porcentaje para obtener la posición y el ángulo que necesitamos.
.module {
clip-path:
polygon(
0% 20px, /* top left */
20px 0%, /* top left */
calc(100% - 20px) 0%, /* top right */
100% 20px, /* top right */
100% calc(100% - 20px), /* bottom right */
calc(100% - 20px) 100%, /* bottom right */
20px 100%, /* bottom left */
0 calc(100% - 20px) /* bottom left */
);
}¿Y sabes qué? Ese número se repite tantas veces que bien podemos convertirlo en una variable. Si alguna vez necesitamos actualizar el número más tarde, todo lo que se necesita es cambiarlo una vez en lugar de todas esas veces individuales.
.module {
--notchSize: 20px;
clip-path:
polygon(
0% var(--notchSize),
var(--notchSize) 0%,
calc(100% - var(--notchSize)) 0%,
100% var(--notchSize),
100% calc(100% - var(--notchSize)),
calc(100% - var(--notchSize)) 100%,
var(--notchSize) 100%,
0% calc(100% - var(--notchSize))
);
}Envíalo.
Vea las cajas con muescas de pluma de Chris Coyier (@chriscoyier) en CodePen.
Esto puede ser evidente, pero asegúrese de tener suficiente relleno para manejar el recorte. Si quiere ser realmente elegante, también puede usar variables CSS en su valor de relleno, por lo que cuanto más haga muescas, más relleno habrá.