Heim > Artikel > Web-Frontend > Ein Beispiel für die Erstellung transparenter Dreiecke mit dem neuen Inhalt von CSS3

Ein Beispiel für die Erstellung transparenter Dreiecke mit dem neuen Inhalt von CSS3

巴扎黑Original: 2017-08-11 13:59:141665Durchsuche

In diesem Artikel finden Sie ein Beispiel für die Verwendung von CSS3 zum Erstellen eines Dreiecks.

Schauen wir uns zunächst den Effekt an. Vor CSS3 war dies völlig undenkbar. Aber heute, wo HTML5 und CSS3 so beliebt sind, ist es kein Problem.

Sehen Sie sich den implementierten Code an:

<!DOCTYPE html>
<html>
<head>
<style type=&#39;text/css&#39;>

/* 上三角 */
.arrow-up {
 width: 0;
 height: 0;
 border-left: 20px solid transparent;
 border-right: 20px solid transparent;
 border-bottom: 20px solid green;
}

/* 下三角 */
.arrow-down {
 width: 0;
 height: 0;
 border-left: 20px solid transparent;
 border-right: 20px solid transparent;
 border-top: 20px solid orange;
}

/* 右三角 */
.arrow-right {
 width: 0;
 height: 0;
 border-top: 60px solid transparent;
 border-bottom: 60px solid transparent;
 border-left: 60px solid blue;
}

/* 左三角 */
.arrow-left {
 width: 0;
 height: 0;
 border-top: 10px solid transparent;
 border-bottom: 10px solid transparent;
 border-right: 10px solid silver;
}
</style>
</head>
<body>
 <p class="arrow-up"></p>
 <p class="arrow-down"></p>
 <p class="arrow-left"></p>
 <p class="arrow-right"></p>
</body>
</html>

Das obige ist der detaillierte Inhalt vonEin Beispiel für die Erstellung transparenter Dreiecke mit dem neuen Inhalt von CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

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

Vorheriger Artikel：Zusammenfassung der CSS-Clear-Float-MethodeNächster Artikel：Zusammenfassung der CSS-Clear-Float-Methode

In Verbindung stehende Artikel

Mehr sehen