Cómo crear bordes sesgados con CSS
En esta publicación, veremos cómo podemos crear un efecto de borde en ángulo (horizontalmente) en una página web. Básicamente, se ve algo como esto:
Tener un borde ligeramente inclinado debería hacer que nuestro diseño web se vea menos rígido y sin brillo. Para hacer este truco, estaremos usando el pseudo-elementos ::antes de y ::después y CSS3 Transform.
Usando los pseudo elementos
Esta técnica utiliza los pseudo-elementos. ::antes de y ::después para inclinar los bordes del elemento. En este ejemplo, estaremos ajustando el borde inferior..
.bloque altura: 400px; ancho: 100%; posición: relativa; fondo: gradiente lineal (a la derecha, rgba (241,231,103,1) 0%, rgba (254,182,69,1) 100%); .block :: after content: "; width: 100%; height: 100%; position: absolute; background: inherit; z-index: -1; bottom: 0; transform-origin: left bottom; transform: skewY (3deg);
Recapitulemos.
los origen transformado Especifica las coordenadas del elemento que queremos transformar. En el ejemplo anterior especificamos abajo a la izquierda Eso pondrá las coordenadas iniciales en el lado inferior izquierdo del bloque..
los transformar: skewY (3deg); hacer el ::después Bloquear sesgo o ángulo a 3 grados. Como especificamos la coordenada de inicio como abajo a la izquierda, la parte inferior derecha del bloque aumenta 3 grados. Si cambiamos el origen transformado a boton derecho y la esquina inferior izquierda se elevará 3 grados en lugar de.
Puede agregar un fondo de color sólido o degradado para ver el resultado.
Hazlo más fácil con Sass Mixin
Para hacer esto más fácil, he creado un mixin de Sass para agregar los bordes angulosos, sin los dolores de cabeza al tratar con la complejidad de las reglas de estilo. Con la siguiente mezcla puede especificar rápidamente el lado (arriba a la izquierda, arriba a la derecha, abajo a la izquierda o abajo a la derecha) para sesgar.
@mixin angle-edge ($ pos-top: null, $ angle-top: null, $ pos-btm: null, $ angle-btm: null) width: 100%; posición: relativa; fondo: gradiente lineal (a la derecha, rgba (241,231,103,1) 0%, rgba (254,182,69,1) 100%); & :: antes, & :: después contenido: "; ancho: 100%; altura: 100%; posición: absoluta; fondo: heredar; índice z: -1; transición: aliviar todos los .5s; @if $ pos-top & :: before @if $ pos-top == 'topleft' top: 0; transform-origin: right superior; transform: skewY ($ angle-top); @if $ pos-top = = 'topright' top: 0; transform-origin: left top; transform: skewY (- $ angle-top); @if $ pos-btm & :: after @if $ pos-btm == 'bottomleft' bottom: 0; transform-origin: right bottom; transform: skewY (- $ angle-btm); @if $ pos-btm == 'bottomright' bottom: 0; transform-origin: left bottom; transformar: skewY ($ angle-btm);
Hay cuatro variables en la mezcla. Las dos primeras variables, $ pos-top y $ ángulo superior, especifica el coordenada inicial superior y el la licenciatura. Las últimas dos variables especifican la coordinar y el la licenciatura Para el fondo lado.
Si llena las cuatro variables, puede inclinar ambos lados (arriba y abajo) del elemento..
Usa el Sass @incluir Sintaxis para insertar la mezcla en un elemento. Puedes ver ejemplos a continuación:
Para agregar borde sesgado en arriba a la izquierda lado:
.bloque @include ángulo-borde (topleft, 3deg);
Para agregar borde sesgado en abajo a la derecha lado:
.bloque @include ángulo-borde (bottomright, 3deg);
Para agregar borde sesgado en arriba a la izquierda y abajo a la derecha lado:
.bloque @include ángulo-borde (topleft, 3deg, bottomright, 3deg);
A continuación se muestra la demo con los mixins aplicados. Cambia el cuadro de selección para cambiar a otro estilo.
Eso es!
