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

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 :

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 :

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 :

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 :

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 :

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 :

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 :

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 :

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!