Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Stilmethoden zum Implementieren flacher Winkel und Bogenfasen in CSS

一个新手
Freigeben: 2017-09-07 10:38:13
Original
3422 Leute haben es durchsucht


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:
Stilmethoden zum Implementieren flacher Winkel und Bogenfasen in CSS

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

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:
Stilmethoden zum Implementieren flacher Winkel und Bogenfasen in 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;
Nach dem Login kopieren
Nach dem Login kopieren

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:
Stilmethoden zum Implementieren flacher Winkel und Bogenfasen in 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;
Nach dem Login kopieren
Nach dem Login kopieren

Der obige Stil implementiert vier flache Eckfasen, also überlegen wir uns weiter, wie man Bogenfasen erzielt. Was ist zu tun?
Bogenfase:
Stilmethoden zum Implementieren flacher Winkel und Bogenfasen in CSS
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;
Nach dem Login kopieren
Nach dem Login kopieren

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:
Stilmethoden zum Implementieren flacher Winkel und Bogenfasen in CSS

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

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:
Stilmethoden zum Implementieren flacher Winkel und Bogenfasen in 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;
Nach dem Login kopieren
Nach dem Login kopieren

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:
Stilmethoden zum Implementieren flacher Winkel und Bogenfasen in 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;
Nach dem Login kopieren
Nach dem Login kopieren

Der obige Stil implementiert vier flache Eckfasen, also überlegen wir uns weiter, wie man Bogenfasen erzielt. Was ist zu tun?
Bogenfase:
Stilmethoden zum Implementieren flacher Winkel und Bogenfasen in CSS
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;
Nach dem Login kopieren
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage