Heim > Web-Frontend > CSS-Tutorial > Wie schreibe ich ein rechtwinkliges Dreieck in CSS?

Wie schreibe ich ein rechtwinkliges Dreieck in CSS?

藏色散人
Freigeben: 2023-01-03 09:26:05
Original
7849 Leute haben es durchsucht

So schreiben Sie ein rechtwinkliges Dreieck in CSS: Erstellen Sie zunächst eine HTML-Beispieldatei. Entfernen Sie dann die Breite der Basis, um ein gleichschenkliges rechtwinkliges Dreieck zu erhalten.

Wie schreibe ich ein rechtwinkliges Dreieck in CSS?

Die Betriebsumgebung dieses Tutorials: Windows 7-System, HTML5- und CSS3-Version, Dell G3-Computer.

Verwenden Sie CSS, um ein rechtwinkliges Dreieck zu schreiben.

<style>
/*原理:第一步*/
.box1{
	width: 0;
	height: 0;
	border-top: 50px solid green;
	border-right: 50px solid red;
	border-bottom: 0px solid yellow; /*1.底边去除就变成直角三角形*/
	border-left: 50px solid blue;
}

/*原理:第二步*/
.box2{
	width: 0;
	height: 0;
	border-top: 100px solid green; /*2.上边拉长就会变成直接三角形*/
	border-right: 50px solid red;
	border-bottom: 0px solid yellow; /*1.底边去除就变成直角三角形*/
	border-left: 50px solid blue;
}

/*实现*/
.box{
	width: 0;/*1.设置宽高为0*/
	height: 0;
	/*2.除右边都变透明色,实边*/
	border-color: transparent red transparent transparent;
	border-style: solid;
	border-width: 100px 50px 0 0; /*3.上边宽100,右边宽50,下左边宽0*/

}
</style>
原理第一步,去除底边宽度,实现等腰直角三角形:
<p class="box1"></p>
原理第二步,加宽上边宽度,实现想要直角三角形:
<p class="box2"></p>
实现,把上边,左边边变透明色:
<p class="box"></p>
Nach dem Login kopieren

Der zweite Schritt des Prinzips besteht darin, die Breite der Oberseite zu verbreitern, um das gewünschte rechtwinklige Dreieck zu erhalten:

Um dies zu erreichen, machen Sie die obere und linke Seite transparent:


Das obige ist der detaillierte Inhalt vonWie schreibe ich ein rechtwinkliges Dreieck in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
css
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