So implementieren Sie Dreiecke in CSS

Implementierungsmethode: 1. Verwenden Sie einen Container mit einer Höhe und Breite von Null und einem transparenten Rand. 3. Verwenden Sie „transform:rotate“ mit „overflow:hidden“; , „▲“ und andere Zeichen werden gezeichnet.

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

Rahmen zum Zeichnen von Dreiecken verwenden

Die Verwendung von Rändern zum Implementieren von Dreiecken sollte den meisten Menschen vertraut sein und wird auch häufig in verschiedenen Aspekten gesehen. Dabei wird ein Container ohne Höhe und Breite sowie eine transparente Randimplementierung verwendet.

Der einfache Code lautet wie folgt:

<div class=&#39;normal&#39;></div>

html, body {
  width: 100%;
  height: 100%;
  display: flex;
}

div {
  width: 0px;
  height: 0px;
  margin: auto;
}

.normal {
  border-top: 50px solid yellowgreen;
  border-bottom: 50px solid deeppink;
  border-left: 50px solid bisque;
  border-right: 50px solid chocolate;
}

Container mit Nullhöhe und -breite, Ränder in verschiedenen Farben festlegen:

Auf diese Weise, wenn die Farbe des Randes auf drei beliebigen Seiten transparent, es wird sehr einfach sein, Dreiecke mit verschiedenen Winkeln zu erhalten: <code>transparent，则非常容易得到各种角度的三角形：

<div class=&#39;top&#39;></div>
<div class=&#39;bottom&#39;></div>
<div class=&#39;left&#39;></div>
<div class=&#39;right&#39;></div>

.top {
  border: 50px solid transparent;
  border-bottom: 50px solid deeppink;
}

.left {
  border: 50px solid transparent;
  border-right: 50px solid deeppink;
}

.bottom {
  border: 50px solid transparent;
  border-top: 50px solid deeppink;
}

.right {
  border: 50px solid transparent;
  border-bottom: 50px solid deeppink;
}

使用 linear-gradient 绘制三角形

接着，我们使用线性渐变 linear-gradient 实现三角形。

它的原理也非常简单，我们实现一个 45° 的渐变：

div {
  width: 100px;
  height: 100px;
  background: linear-gradient(45deg, deeppink, yellowgreen);
}

让它的颜色从渐变色变为两种固定的颜色：

div {
  width: 100px;
  height: 100px;
  background: linear-gradient(45deg, deeppink, deeppink 50%, yellowgreen 50%, yellowgreen 100%);
}

再让其中一个颜色透明即可：

div {
  background: linear-gradient(45deg, deeppink, deeppink 50%, transparent 50%, transparent 100%);
}

transform: rotate 配合 overflow: hidden 绘制三角形

这种方法还是比较常规的，使用 transform: rotate 配合 overflow: hidden。一看就懂，一学就会，简单的动画示意图如下：

设置图形的旋转中心在左下角 left bottom，进行旋转，配合 overflow: hidden。

完整的代码：

<div class="demo"></div>
<div class="demo-opacity"></div>
<div class="triangle"></div>

html, body {
    width: 100%;
    height: 100%;
    display: flex;
}

div {
    width: 141px;
    height: 100px;
    margin: auto;
}

.demo-opacity {
    overflow: hidden;
}

.demo,
.demo-opacity {
    position: relative;
    border: 1px solid #000;
    background: unset;
    
    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        animation: conicmove 3s infinite linear;
        background: deeppink;
        transform-origin: left bottom;
        z-index: -1;
    }
}

.triangle {
    position: relative;
    background: unset;
    overflow: hidden;
    
    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: deeppink;
        transform-origin: left bottom;
        transform: rotate(45deg);
        z-index: -1;
    }
}

@keyframes conicmove {
    100% {
        transform: rotate(45deg);
    }
}

利用字符绘制三角形

OK，最后一种，有些独特，就是使用字符表示三角形。

下面列出一些三角形形状的字符的十进制 Unicode 表示码。

◄ : ◄ 
► : ► 
▼ : ▼ 
▲ : ▲
⊿ : ⊿
△ : △

譬如，我们使用 ▼

<div class="normal">&#9660; </div>

div {
    font-size: 100px;
    color: deeppink;
}

Linear-Gradient zum Zeichnen von Dreiecken verwenden

Als nächstes verwenden wir den linearen Gradienten linear-gradient, um das Dreieck zu implementieren. Das Prinzip ist auch sehr einfach. Wir implementieren einen 45°-Gradienten:

rrreee🎜🎜🎜Lassen Sie die Farbe von einer Verlaufsfarbe zu zwei festen Farben wechseln: 🎜rrreee🎜🎜🎜Machen Sie einfach eine der Farben transparent:🎜rrreee 🎜🎜🎜🎜transformieren: Mit Überlauf drehen : versteckt, um Dreiecke zu zeichnen 🎜🎜🎜Diese Methode ist relativ konventionell, verwenden Sie transform: rotieren mit overflow: versteckt. Sie können es auf einen Blick verstehen und lernen, sobald Sie es gelernt haben. Das einfache Animationsdiagramm sieht wie folgt aus: 🎜🎜🎜🎜Setzen Sie das Rotationszentrum der Grafik auf die untere linke Ecke links unten, drehen Sie sie und Kooperieren Sie mit overflow: versteckt. 🎜🎜Vollständiger Code: 🎜rrreeerrreee🎜🎜Zeichen zum Zeichnen von Dreiecken verwenden🎜🎜🎜OK, die letzte, etwas einzigartige Möglichkeit besteht darin, Zeichen zur Darstellung von Dreiecken zu verwenden. 🎜🎜Die dezimalen Unicode-Darstellungscodes einiger dreieckiger Zeichen sind unten aufgeführt. 🎜rrreee🎜Zum Beispiel verwenden wir ▼ , um ein Dreieck zu implementieren ▼, der Code lautet wie folgt: 🎜rrreeerrreee🎜Der Effekt ist immer noch gut: 🎜🎜🎜🎜🎜 (Lernvideo-Sharing: 🎜CSS-Video-Tutorial🎜) 🎜

Das obige ist der detaillierte Inhalt vonSo implementieren Sie Dreiecke in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!