Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Verwendung des CSS-Border-Attributs: Verwenden Sie das CSS-Border-Attribut, um ein Dreieck zu erstellen

不言
Freigeben: 2018-07-28 15:19:18
Original
2276 Leute haben es durchsucht

Der äußere Rand des Elements ist der Rand des Elements. Der Rahmen eines Elements besteht aus einer oder mehreren Linien, die den Inhalt und die inneren Ränder des Elements umgeben. Jeder Rahmen verfügt über drei Eigenschaften: Breite, Stil und Farbe. Im folgenden Artikel stellen wir verschiedene Beispiele aus diesen drei Aspekten vor und verwenden die CSS-Eigenschaft border, um ein Dreieck zu erstellen.

Werfen wir zunächst einen Blick auf den Effekt, der durch das CSS-Randattribut erzielt wird:

 <style>
div{
    width: 100px; height: 50px;
    border: 30px solid red;
    border-right-color: green;
    border-bottom-color: blue;
    border-left-color:yellow;
    }
</style>
Nach dem Login kopieren
rrree

Der Effekt ist wie folgt:

Verwendung des CSS-Border-Attributs: Verwenden Sie das CSS-Border-Attribut, um ein Dreieck zu erstellen

Wenn wir die Breite der Box reduzieren, lautet der Code wie folgt:

<div></div>
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren
<style>
div{
    width: 20px; height: 50px;
    border: 20px solid red;
    border-right-color: green;
    border-bottom-color: blue;
    border-left-color: yellow;
    }
</style>
Nach dem Login kopieren

Der Effekt ist wie folgt:

Verwendung des CSS-Border-Attributs: Verwenden Sie das CSS-Border-Attribut, um ein Dreieck zu erstellen

Wenn wir die Breite und Höhe des Elements entfernen, lautet der Code wie folgt:

<div></div>
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren
<style>
div{
    width: 0; 
    border: 50px solid red;
    border-right-color: green;
    border-bottom-color: blue;
    border-left-color: yellow;
    }
</style>
Nach dem Login kopieren

Der Effekt ist wie folgt:

Verwendung des CSS-Border-Attributs: Verwenden Sie das CSS-Border-Attribut, um ein Dreieck zu erstellen

Zu diesem Zeitpunkt Wir stellen fest, dass, wenn die Breite und Höhe des Elements 0 sind, es zu vier zusammengedrückten Dreiecken wird. Wenn also die Farbe von drei der Ränder als transparent definiert wird, erhalten wir ein Dreieck!

Setzen Sie die Farbe der drei Ränder auf transparent:

<div></div>
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren
<style>
p{
    width: 0;
    border: 20px solid transparent;
    border-top-color: blue;
}
</style>
Nach dem Login kopieren

Der Laufeffekt ist wie folgt:

Verwendung des CSS-Border-Attributs: Verwenden Sie das CSS-Border-Attribut, um ein Dreieck zu erstellen

Durch den Code, den wir finden Die Ausrichtung des kleinen Dreiecks ist entgegengesetzt zum Kantennamen mit der eingestellten undurchsichtigen Farbe.

Zum Beispiel stellen wir border-top-color: blue ein, sodass das kleine Dreieck nach unten zeigt.

Tipp:

Wenn wir das kleine Dreieck verwenden, stellen wir die anderen drei Seiten einfach auf transparente Farben ein, da die vier Ränder ein Rechteck bilden Um das Layout zu vereinfachen, können wir die gegenüberliegende Seite des kleinen Dreiecks auf „Keine“ setzen. Das spezifische Prinzip lautet wie folgt:

<p></p>
Nach dem Login kopieren
rree

Der Operationseffekt ist wie folgt:

Verwendung des CSS-Border-Attributs: Verwenden Sie das CSS-Border-Attribut, um ein Dreieck zu erstellen

<style>
div{
   width: 0; height: 0;
   border-top: 20px solid blue;
   border-left: 20px solid red;
   border-right: 20px solid green;
   border-bottom: none;
  }
</style>
Nach dem Login kopieren
rrree

Der Betriebseffekt ist wie folgt:

Verwendung des CSS-Border-Attributs: Verwenden Sie das CSS-Border-Attribut, um ein Dreieck zu erstellen

Anwendung:

Wann wir wollen Um ein solches Layout zu erstellen, können wir diese Methode verwenden. Um kleine Dreiecke zu erstellen, müssen Sie nicht mehr img oder backgroud verwenden, um dies zu erreichen.

<div></div>
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren
rrree

Der Laufeffekt ist wie folgt:

Verwendung des CSS-Border-Attributs: Verwenden Sie das CSS-Border-Attribut, um ein Dreieck zu erstellen

Erweitern:

div{
  width: 0; 
   border:20px solid transparent;
   border-top: 20px solid blue;
   border-bottom: none;
}
Nach dem Login kopieren
<div></div>
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren

Der Laufeffekt ist wie folgt:

Verwendung des CSS-Border-Attributs: Verwenden Sie das CSS-Border-Attribut, um ein Dreieck zu erstellen

Empfehlungen für verwandte Artikel:

CSS border-left-color property_html/css_WEB-ITnose

CSS-Randeigenschaften-Tutorial (Farbstil)

Verwandte Kurse empfohlen:

CSS-Video-Tutorial zum detaillierten Verständnis von Rändern

Das obige ist der detaillierte Inhalt vonVerwendung des CSS-Border-Attributs: Verwenden Sie das CSS-Border-Attribut, um ein Dreieck zu erstellen. 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