Como criar bordas enviesadas com CSS
Neste post, vamos ver como podemos criar um efeito de borda angular (horizontalmente) em uma página da web. Basicamente, parece algo como isto:
Ter uma borda levemente inclinada deve fazer com que o layout da nossa web pareça menos rígido e sem graça. Para fazer esse truque, estaremos usando o pseudo-elementos ::antes e ::depois de e CSS3 Transform.
Usando pseudo-elementos
Essa técnica usa os pseudo-elementos ::antes e ::depois de para inclinar as arestas do elemento. Neste exemplo, estaremos ajustando a borda inferior.
.bloco altura: 400px; largura: 100%; posição: relativa; fundo: gradiente linear (para a direita, rgba (241,231,103,1) 0%, rgba (254,182,69,1) 100%); .block :: after content: "; largura: 100%; height: 100%; posição: absoluto; background: herdar; z-index: -1; bottom: 0; transform-origem: fundo esquerdo; transform: skewY (3deg);
Vamos recapitular.
o transformar-origem especifica as coordenadas do elemento que queremos transformar. No exemplo acima, especificamos inferior esquerdo que colocará as coordenadas iniciais no lado inferior esquerdo do bloco.
o transformar: skewY (3deg); faz o ::depois de inclinação de bloco ou ângulo a 3 graus. Desde que especificamos a coordenada inicial como o canto inferior esquerdo, o canto inferior direito do bloco aumenta 3 graus. Se trocarmos o transformar-origem para Inferior direito e o canto inferior esquerdo será aumentado em 3 graus.
Você pode adicionar um fundo de cor sólida ou gradiente para ver o resultado.
Torne mais fácil com o Sass Mixin
Para tornar isso mais fácil, eu criei um Sass mixin para adicionar as bordas em ângulo, menos as dores de cabeça de lidar com as complexidades das regras de estilo. Com o seguinte mixin você pode especificar rapidamente o lado esquerdo superior, superior direito, inferior esquerdo ou inferior direito - para inclinar.
@mixin angle-edge ($ pos-top: null, $ angle-top: nulo, $ pos-btm: nulo, $ ângulo-btm: nulo) largura: 100%; posição: relativa; fundo: gradiente linear (para a direita, rgba (241,231,103,1) 0%, rgba (254,182,69,1) 100%); & :: antes, & :: depois de content: "; width: 100%; height: 100%; position: absoluto; background: inherit; z-index: -1; transition: atenua todos os .5s; @if $ pos-top & :: before @if $ pos-top == 'topleft' topo: 0; transform-origin: top direito; transform: skewY ($ angulo-alto); @if $ pos-top = = 'topright' top: 0; transform-origin: topo esquerdo; transform: skewY (- $ angle-top); @if $ pos-btm & :: depois de @if $ pos-btm == 'bottomleft' bottom: 0; transform-origin: parte inferior direita; transform: skewY (- $ angle-btm); @if $ pos-btm == 'bottomright' fundo: 0; transform-origin: fundo esquerdo; transformar: skewY ($ angle-btm);
Existem quatro variáveis no mixin. As duas primeiras variáveis, $ pos-top e $ angle-top, especifique o top coordenada inicial e a grau. As duas últimas variáveis especificam coordenada e a grau para o inferior lado.
Se você preencher todas as quatro variáveis, você pode inclinar ambos os lados - superior e inferior - do elemento.
Use o Sass @incluir sintaxe para inserir o mixin em um elemento. Você pode ver exemplos abaixo:
Para adicionar borda inclinada canto superior esquerdo lado:
.bloco @include angle-edge (topleft, 3deg);
Para adicionar borda inclinada canto inferior direito lado:
.bloco @include angle-edge (bottomright, 3deg);
Para adicionar borda inclinada canto superior esquerdo e canto inferior direito lado:
.bloquear @include angle-edge (topleft, 3deg, bottomright, 3deg);
Abaixo está a demo com as mixins aplicadas. Alterar a caixa de seleção para alternar para outro estilo.
É isso aí!
