Comment implémenter des triangles en CSS

Méthode d'implémentation : 1. Utilisez un conteneur avec une hauteur et une largeur nulles et une bordure transparente ; 2. Utilisez un dégradé linéaire ; 3. Utilisez "transform:rotate" avec "overflow:hidden" ; , "▲" et d'autres caractères sont dessinés.

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

Utiliser une bordure pour dessiner des triangles

L'utilisation d'une bordure pour implémenter des triangles devrait être familière à la plupart des gens, et elle est également souvent vue sous divers aspects. Elle utilise un conteneur avec une hauteur et une largeur nulles et une implémentation de bordure transparente.

Le code simple est le suivant :

<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;
}

Conteneur avec une hauteur et une largeur nulles, définissez des bordures de différentes couleurs :

De cette façon, si la couleur de la bordure sur trois côtés est transparent, ce sera très Il est facile d'obtenir des triangles avec différents angles : <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;
}

Utilisez un dégradé linéaire pour dessiner des triangles

Ensuite, nous utilisons un dégradé linéaire gradient linéaire pour implémenter le triangle. Le principe est également très simple. Nous implémentons un dégradé 45° :

rrreee🎜🎜🎜Laissez sa couleur passer d'une couleur dégradée à deux couleurs fixes : 🎜rrreee🎜🎜🎜Rendez simplement l'une des couleurs transparente :🎜rrreee 🎜🎜🎜🎜transform : rotation avec débordement : caché pour dessiner des triangles 🎜🎜🎜 Cette méthode est relativement conventionnelle, utilisez transform: rotate avec overflow: Hidden. Vous pouvez le comprendre en un coup d'œil et l'apprendre dès que vous l'apprenez. Le schéma d'animation simple est le suivant : 🎜🎜🎜🎜Définissez le centre de rotation du graphique dans le coin inférieur gauche en bas à gauche, faites-le pivoter et coopérer avec overflow: caché. 🎜🎜Code complet : 🎜rrreeerrreee🎜🎜Utiliser des caractères pour dessiner des triangles🎜🎜🎜OK, la dernière, quelque peu unique, consiste à utiliser des caractères pour représenter des triangles. 🎜🎜Les codes de représentation décimaux Unicode de certains caractères en forme de triangle sont répertoriés ci-dessous. 🎜rrreee🎜Par exemple, on utilise ▼ pour implémenter un triangle ▼, le code est le suivant : 🎜rrreeerrreee🎜L'effet est toujours bon : 🎜🎜🎜🎜🎜 (Partage vidéo d'apprentissage : 🎜tutoriel vidéo CSS🎜) 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!