Comment implémenter des triangles en CSS-tutoriel CSS-php.cn

Comment implémenter des triangles en CSS

青灯夜游

Libérer： 2021-10-11 17:23:26

original

25727 Les gens l'ont consulté

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.

Comment implémenter des triangles en CSS

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>

Copier après la connexion

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

Copier après la connexion

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

Comment implémenter des triangles en CSS

De cette façon, si la couleur de la bordure sur trois côtés est transparent< /code>, 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>

Copier après la connexion

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

Copier après la connexion

Comment implémenter des triangles en CSS

使用 linear-gradient 绘制三角形

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

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

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

Copier après la connexion

Comment implémenter des triangles en CSS

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

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

Copier après la connexion

Comment implémenter des triangles en CSS

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

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

Copier après la connexion

Comment implémenter des triangles en CSS

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

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

Comment implémenter des triangles en CSS

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

完整的代码：

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

Copier après la connexion

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

Copier après la connexion

利用字符绘制三角形

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

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

◄ : &#9668; 
► : &#9658; 
▼ : &#9660; 
▲ : &#9650;
⊿ : &#8895;
△ : &#9651;

Copier après la connexion

譬如，我们使用 ▼

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

Copier après la connexion

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

Copier après la connexion

Utilisez un dégradé linéaire pour dessiner des triangles 1Comment implémenter des triangles en CSS

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🎜 Comment implémenter des triangles en CSS

🎜🎜Rendez simplement l'une des couleurs transparente :🎜rrreee 🎜 Comment implémenter des triangles en CSS

🎜🎜🎜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 : 🎜🎜 Comment implémenter des triangles en CSS

🎜🎜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!