Comment créer des bords asymétriques avec CSS
Dans cet article, nous allons voir comment créer un effet de bord incliné (horizontalement) sur une page Web. En gros, ça ressemble à quelque chose comme ça:
Avoir un bord légèrement incliné devrait rendre notre mise en page Web moins rigide et terne. Pour faire cette astuce, nous allons utiliser le pseudo-éléments ::avant et ::après et Transformation CSS3.
Utiliser des pseudo-éléments
Cette technique utilise les pseudo-éléments ::avant et ::après pour incliner les bords de l'élément. Dans cet exemple, nous allons ajuster le bord inférieur.
.bloc hauteur: 400px; largeur: 100%; position: relative; arrière-plan: gradient linéaire (à droite, 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; transformation-origine: gauche en bas; transformation: skewY (3deg);
Résumons.
le transformer-origine spécifie les coordonnées de l'élément que nous voulons transformer. Dans l'exemple ci-dessus, nous avons spécifié En bas à gauche qui mettra les coordonnées de départ sur le côté inférieur gauche du bloc.
le transformer: skew (3deg); fait le ::après bloquer l’angle ou l’angle à 3 degrés. Comme nous avons spécifié la coordonnée de départ en bas à gauche, la partie inférieure droite du bloc se lève de 3 degrés. Si nous échangeons le transformer-origine à en bas à droite et le coin inférieur gauche sera augmenté de 3 degrés à la place.
Vous pouvez ajouter un fond ou un dégradé de couleur unie pour voir le résultat..
Facilitez-vous la vie avec Sass Mixin
Pour rendre cela plus facile, j'ai créé un mixin Sass pour ajouter les bords inclinés, moins les maux de tête liés à la complexité des règles de style. Avec le mixin suivant, vous pouvez rapidement spécifier le côté - en haut à gauche, en haut à droite, en bas à gauche ou en bas à droite - à incliner.
@mixin angle-edge ($ pos-top: null, $ angle-top: null, $ pos-btm: null, $ angle-btm: null) width: 100%; position: relative; arrière-plan: gradient linéaire (à droite, rgba (241,231,103,1) 0%, rgba (254,182,69,1) 100%); & :: before, & :: after contenu: "; largeur: 100%; hauteur: 100%; position: absolu; arrière-plan: hérité; z-index: -1; transition: alléger tous les .5s; @if $ pos-top & :: before @if $ pos-top == 'topleft' top: 0; transformation-origine: droite en haut; transformation: skewY ($ angle-top); @if $ pos-top = = 'topright' top: 0; origine-transformation: gauche en haut; transformation: skewY (- $ angle-top); @if $ pos-btm & :: après @if $ pos-btm == 'bottomleft' en bas: 0; origine de la transformation: en bas à droite; transformation: oblique (- $ angle-btm); @if $ pos-btm == 'en bas à droite' en bas: 0; transformation-origine: à gauche en bas; transformer: skewY ($ angle-btm);
Il y a quatre variables dans le mixin. Les deux premières variables, $ pos-top et $ sommet, spécifie le coordonnée de départ supérieure et le diplôme. Les deux dernières variables spécifient la coordonner et le diplôme pour le bas côté.
Si vous remplissez les quatre variables, vous pouvez incliner les deux côtés - haut et bas - de l'élément..
Utilisez le Sass @comprendre syntaxe pour insérer le mixin dans un élément. Vous pouvez voir des exemples ci-dessous:
Pour ajouter un bord asymétrique sur en haut à gauche côté:
.block @include angle-edge (topleft, 3deg);
Pour ajouter un bord asymétrique sur en bas à droite côté:
.block @include angle-edge (bottomright, 3deg);
Pour ajouter un bord asymétrique sur en haut à gauche et en bas à droite côté:
.bloc @include angle-bord (topleft, 3deg, bottomright, 3deg);
Ci-dessous, la démo avec les mixins appliqués. Changer la case de sélection pour basculer vers un autre style.
C'est tout!
