Astuces pour couper les coins en utilisant des propriétés CSS Mask et Clip-Path

Cet article explore les techniques créatives de coupe d'angle à l'aide de propriétés CSS mask et clip-path . Nous allons s'appuyer sur les travaux antérieurs avec les masques CSS pour créer diverses formes d'angle en utilisant du code réutilisable et des variables réglables. Un générateur CSS en ligne est référencé pour visualiser les résultats.

Deux types de coupe primaires sont examinés: circulaire et incliné. Chacun permet des sorties de forme complète ou de bordure uniquement et la sélection des coin.

La propriété CSS mask est fortement utilisée. S'il n'est pas familier, une amorce rapide est recommandée avant de procéder.

Coupures circulaires

Les coupes circulaires utilisent radial-gradient() . Quatre gradients, un par coin, sont initialement utilisés. Chaque gradient couvre un quart des dimensions de l'élément. Un échantillon de dégradé:

 <code>radial-gradient(circle 30px at top left, #0000 98%, red) top left;</code>

Cela crée un cercle de rayon de 30px en haut à gauche, transparent (# 0000) au centre et rouge ailleurs. Les ajustements mineurs (par exemple, 98% au lieu de 100%) empêchent les bords déchiquetés.

Le code optimisé utilise des propriétés personnalisées:

 <code>--g: #0000 98%,#000; --r: 30px; mask: radial-gradient(var(--r) at 0 0 ,var(--g)) 0 0, radial-gradient(var(--r) at 100% 0 ,var(--g)) 100% 0, radial-gradient(var(--r) at 0 100%,var(--g)) 0 100%, radial-gradient(var(--r) at 100% 100%,var(--g)) 100% 100%; mask-size: 51% 51%; mask-repeat: no-repeat;</code>

Le générateur utilise une syntaxe légèrement différente et plus concise.

Moins de gradients?

Oui! Un dégradé peut suffire. L'astuce implique un seul radial-gradient() de grande taille avec sa position ajustée pour créer l'illusion de quatre coins coupés. Cette méthode nécessite de connaître les dimensions de l'élément. Une solution de contournement utilisant des pourcentages et une taille de gradient légèrement plus petite (99,5%) est présentée, mais a des limites avec des dimensions décimales. Une méthode finale et supérieure unique utilise des décalages négatifs pour réaliser le même effet sans problème d'arrondi.

La désactivation du coin est obtenue en supprimant le gradient (s) pertinent (s) et en ajustant les tailles de gradient restant.

Découpes circulaires uniquement

La création de formes de frontière uniquement nécessite un pseudo-élément pour éviter d'obscurcir le contenu. Différentes configurations (un, deux, trois ou quatre coins coupées) nécessitent des combinaisons variables de radial-gradient() et conic-gradient() pour atteindre l'effet de bordure souhaité. L'article détaille ces combinaisons, mettant en évidence l'utilisation de repeat-y pour réduire le nombre de gradients nécessaires dans certains cas.

Découpes inclinées

Les coupes inclinées utilisent conic-gradient() , un par coin. Chaque gradient from positions et at positions est ajusté pour créer la coupe inclinée. Les coins invalidants suivent le même principe que les coupes circulaires. clip-path offre une alternative, définissant chaque coin avec trois points. Une formule pour calculer ces points est fournie. Le cas d'angle à 90 degrés permet l'optimisation, en utilisant un seul gradient.

Découpes inclinées uniquement

La méthode clip-path est préférée aux gradients pour les coupes inclinées uniquement en raison de la complexité et des problèmes potentiels anti-aliasing avec les gradients. L'article décrit l'approche clip-path , détaillant le calcul des points intérieurs et extérieurs. Le cas à 180 degrés permet l'optimisation du code.

Conclusion

L'article montre la puissance et la flexibilité du mask CSS et clip-path pour créer des formes complexes. Bien que des explications détaillées soient fournies, le générateur en ligne qui l'accompagne simplifie la génération de code, ce qui rend ces techniques accessibles à divers besoins de conception.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!