Ein Beispiel für die Erstellung transparenter Dreiecke mit dem neuen Inhalt von CSS3-CSS-Tutorial-php.cn

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

巴扎黑

Freigeben： 2017-08-11 13:59:14

Original

1735 Leute haben es durchsucht

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>

Nach dem Login kopieren

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!