Stilmethoden zum Implementieren flacher Winkel und Bogenfasen in CSS

Im Webdesign stoßen Sie manchmal auf einige Stilanforderungen für das Eckenschneiden. Es gibt viele Möglichkeiten, dies zu erreichen, sei es durch die Verwendung von Bildern oder durch Knotenüberlagerung -Cutting-Stil, hier verwende ich direkt CSS, um den Corner-Cutting-Stil zu implementieren.
Eine einzelne Ecke schneiden:

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

Verwenden Sie das oben gezeigte CSS, um den Stil zu erreichen, und ändern Sie den Winkel, um den Eckenschneideffekt in jedem Winkel zu erzielen.
Zwei Ecken abschneiden:

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;

Im obigen Stil verwendet der Autor zwei Farben, um den Lesern das Verständnis der Bedeutung zu erleichtern.
Zwei Eckschnitte werden erreicht, vier Ecken sind problemlos möglich.
Vier Eckfasen werden realisiert:

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;

Der obige Stil implementiert vier flache Eckfasen, also überlegen wir uns weiter, wie man Bogenfasen erzielt. Was ist zu tun?
Bogenfase:

Wie Sie sehen, ähnelt das Muster einer herkömmlichen Rasierklinge. Es ist nicht schwierig, diesen Stil zu erreichen. Wir können radiale Verläufe anstelle von linearen Verläufen verwenden.

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;

Um den Effekt des Eckenschneidens zu erzielen, gibt es viele andere Lösungen, wie z. B. Inline-SVG- und Randbildlösungen, Beschneidungspfadlösungen usw. Interessierte Leser können sie selbst erkunden und ausprobieren.

Im Webdesign stoßen Sie manchmal auf einige Stilanforderungen für das Eckenschneiden. Es gibt viele Möglichkeiten, dies zu erreichen, sei es durch die Verwendung von Bildern oder durch Knotenüberlagerung -Cutting-Stil, hier verwende ich direkt CSS, um den Corner-Cutting-Stil zu implementieren.
Eine einzelne Ecke schneiden:

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

Verwenden Sie das oben gezeigte CSS, um den Stil zu erreichen, und ändern Sie den Winkel, um den Eckenschneideffekt in jedem Winkel zu erzielen.
Zwei Ecken abschneiden:

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;

Im obigen Stil verwendet der Autor zwei Farben, um den Lesern das Verständnis der Bedeutung zu erleichtern.
Zwei Ecken werden erreicht, vier Ecken sind einfach.
Vier Eckfasen werden realisiert:

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;

Der obige Stil implementiert vier flache Eckfasen, also überlegen wir uns weiter, wie man Bogenfasen erzielt. Was ist zu tun?
Bogenfase:

Wie Sie sehen, ähnelt das Muster einer herkömmlichen Rasierklinge. Es ist nicht schwierig, diesen Stil zu erreichen. Wir können radiale Verläufe anstelle von linearen Verläufen verwenden.

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;

Um den Effekt des Eckenschneidens zu erzielen, gibt es viele andere Lösungen, wie z. B. Inline-SVG- und Randbildlösungen, Beschneidungspfadlösungen usw. Interessierte Leser können sie selbst erkunden und ausprobieren.

Das obige ist der detaillierte Inhalt vonStilmethoden zum Implementieren flacher Winkel und Bogenfasen in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!