Maison  >  Article  >  interface Web  >  Méthodes de style pour implémenter des angles plats et des chanfreins d'arc en CSS

Méthodes de style pour implémenter des angles plats et des chanfreins d'arc en CSS

一个新手
一个新手original
2017-09-07 10:38:133429parcourir


Dans la conception Web, vous rencontrerez parfois certaines exigences de style pour la coupe des coins. Il existe de nombreuses façons d'y parvenir, qu'il s'agisse d'images ou de superposition de nœuds, cela peut être réalisé. -style de coupe, ici j'utilise directement css pour implémenter le style de coupe de coin.
Coupez un seul coin :
Méthodes de style pour implémenter des angles plats et des chanfreins darc en CSS

background: #58a;background: linear-gradient(-45deg, transparent 15px, #58a 0);

Vous pouvez utiliser le CSS présenté ci-dessus pour obtenir le style et modifier l'angle pour obtenir l'effet de coupe de coin sous n'importe quel angle.
Coupez deux coins :
Méthodes de style pour implémenter des angles plats et des chanfreins darc en CSS

background: #58a;background: linear-gradient(-45deg, transparent 15px, #58a 0) right, 
            linear-gradient(45deg, transparent 15px, #655 0) left;background-size: 50% 100%;background-repeat: no-repeat;

Dans le style ci-dessus, l'auteur utilise deux couleurs pour permettre aux lecteurs de comprendre le sens.
Deux virages sont réalisés, quatre virages c'est facile.
Quatre chanfreins d'angle sont réalisés :
Méthodes de style pour implémenter des angles plats et des chanfreins darc en CSS

background: #58a;background: linear-gradient(135deg, transparent 15px, #58a 0) top left, 
            linear-gradient(-135deg, transparent 15px, #58a 0) top right, 
            linear-gradient(-45deg, transparent 15px, #58a 0) bottom right, 
            linear-gradient(45deg, transparent 15px, #58a 0) bottom left;background-size: 50% 50%;background-repeat: no-repeat;

Le style ci-dessus implémente quatre chanfreins d'angle plats, réfléchissons donc davantage à la manière d'obtenir des chanfreins en arc. Que faire ?
Chanfrein d'arc :
Méthodes de style pour implémenter des angles plats et des chanfreins darc en CSS
Comme vous pouvez le voir, le motif est similaire à une lame de rasoir traditionnelle. Il n'est pas difficile de réaliser ce style. Nous pouvons utiliser des dégradés radiaux au lieu de dégradés linéaires.

background: #58a;background: radial-gradient(circle at top left, transparent 15px, #58a 0) top left, 
            radial-gradient(circle at top right, transparent 15px, #58a 0) top right, 
            radial-gradient(circle at bottom right, transparent 15px, #58a 0) bottom right, 
            radial-gradient(circle at bottom left, transparent 15px, #58a 0) bottom left;background-size: 50% 50%;background-repeat: no-repeat;

Pour obtenir l'effet de coupe d'angle, il existe de nombreuses autres solutions, telles que les solutions de svg et d'image de bordure en ligne, les solutions de chemin de recadrage, etc. Les lecteurs intéressés peuvent les explorer et les essayer par eux-mêmes.

Dans la conception Web, vous rencontrerez parfois certaines exigences de style pour la coupe des coins. Il existe de nombreuses façons d'y parvenir, qu'il s'agisse d'images ou de superposition de nœuds, cela peut être réalisé. -style de coupe, ici j'utilise directement css pour implémenter le style de coupe de coin.
Coupez un seul coin :
Méthodes de style pour implémenter des angles plats et des chanfreins darc en CSS

background: #58a;background: linear-gradient(-45deg, transparent 15px, #58a 0);

Vous pouvez utiliser le CSS présenté ci-dessus pour obtenir le style et modifier l'angle pour obtenir l'effet de coupe de coin sous n'importe quel angle.
Coupez deux coins :
Méthodes de style pour implémenter des angles plats et des chanfreins darc en CSS

background: #58a;background: linear-gradient(-45deg, transparent 15px, #58a 0) right, 
            linear-gradient(45deg, transparent 15px, #655 0) left;background-size: 50% 100%;background-repeat: no-repeat;

Dans le style ci-dessus, l'auteur utilise deux couleurs pour permettre aux lecteurs de comprendre le sens.
Deux virages sont réalisés, quatre virages c'est facile.
Quatre chanfreins de coin sont réalisés :
Méthodes de style pour implémenter des angles plats et des chanfreins darc en CSS

background: #58a;background: linear-gradient(135deg, transparent 15px, #58a 0) top left, 
            linear-gradient(-135deg, transparent 15px, #58a 0) top right, 
            linear-gradient(-45deg, transparent 15px, #58a 0) bottom right, 
            linear-gradient(45deg, transparent 15px, #58a 0) bottom left;background-size: 50% 50%;background-repeat: no-repeat;

Le style ci-dessus réalise quatre chanfreins de coin plats, réfléchissons donc davantage à la manière de réaliser des chanfreins en arc. Que faire ?
Chanfrein d'arc :
Méthodes de style pour implémenter des angles plats et des chanfreins darc en CSS
Comme vous pouvez le voir, le motif est similaire à une lame de rasoir traditionnelle. Il n'est pas difficile de réaliser ce style. Nous pouvons utiliser des dégradés radiaux au lieu de dégradés linéaires.

background: #58a;background: radial-gradient(circle at top left, transparent 15px, #58a 0) top left, 
            radial-gradient(circle at top right, transparent 15px, #58a 0) top right, 
            radial-gradient(circle at bottom right, transparent 15px, #58a 0) bottom right, 
            radial-gradient(circle at bottom left, transparent 15px, #58a 0) bottom left;background-size: 50% 50%;background-repeat: no-repeat;

Pour obtenir l'effet de coupe d'angle, il existe de nombreuses autres solutions, telles que les solutions de svg et d'image de bordure en ligne, les solutions de chemin de recadrage, etc. Les lecteurs intéressés peuvent les explorer et les essayer par eux-mêmes.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn