6 conseils pour dessiner des triangles avec CSS (Partager)

Cet article vous présentera N techniques pour dessiner des triangles en utilisant CSS. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Dans certaines interviews, vous pouvez souvent voir une question sur CSS, notamment Comment utiliser CSS pour dessiner un triangle, et la réponse courante est généralement Là n'est qu'une façon de dessiner en utilisant des bordures.

Avec le développement du CSS aujourd'hui, il existe en fait de nombreuses façons intéressantes de dessiner des triangles en utilisant uniquement du CSS. Cet article les répertorie en détail.

Grâce à cet article, vous pouvez apprendre 6 façons de dessiner des triangles en utilisant CSS, et elles sont toutes très faciles à maîtriser. Bien sûr, cet article n'est qu'une introduction. CSS change chaque jour qui passe. Il se peut que certaines méthodes intéressantes manquent dans cet article. Vous êtes invités à les ajouter dans la zone de message. >Utiliser la bordure pour dessiner des triangles

Utilisation Le triangle de mise en œuvre de la bordure devrait être maîtrisé par la plupart des gens, et il est également souvent vu sous divers aspects. Il utilise un conteneur avec une hauteur et une largeur nulles et une bordure transparente. mise en œuvre.

Le code simple est le suivant :

div {
  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 :

Dans ce manière, n'importe laquelle Si la couleur des bordures à trois côtés est , il est très facile d'obtenir des triangles sous différents angles :

transparent

Démo CodePen - Utiliser bordure pour implémenter des triangles

https://codepen.io/Chokcoco/pen/GqrVpB

Utilisez un dégradé linéaire pour dessiner le triangle

Ensuite, nous utilisons le dégradé linéaire Implémentez le triangle.

Son principe est également très simple. On met en œuvre un linear-gradient dégradé :

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

45°

pour changer sa couleur d'une couleur dégradée à deux couleurs fixes Couleur :

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

Rendre ensuite transparente une des couleurs :

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

En tournant ou

, nous pouvons également obtenir des triangles de différents angles et tailles. La démo complète peut être cliqué ici :

rotatescaleDémo CodePen - Utiliser un dégradé linéaire pour implémenter des triangles

https://codepen. io/Chokcoco/pen/RwKKOZw

Utilisez le dégradé conique pour dessiner des triangles

C'est toujours un dégradé Ci-dessus, nous avons utilisé un dégradé linéaire pour réaliser un triangle, qui est toujours un dégradé. est intéressant. De plus, dans la famille des dégradés, le dégradé angulaire peut également être utilisé pour implémenter des triangles.

La méthode est que conic-gradientle point central du dégradé angulaire peut être défini

, et le point central du cercle similaire au dégradé radial peut également être défini.

Nous définissons le point central du dégradé angulaire à , c'est-à-dire

, au milieu du haut du conteneur, puis effectuons le dégradé angulaire jusqu'à ce que le dégradé atteigne une certaine plage d'angle , qui sont toutes des formes triangulaires.

50% 0 Supposons que nous ayons un conteneur avec center top hauteur et largeur, définissez son point central de dégradé angulaire sur

 :

200px x 100px50% 0

et définissez-le à partir de Commencez à dessiner le graphique de gradient angulaire. Le diagramme schématique est le suivant :

90°

Vous pouvez voir qu'au début, le graphique de gradient angulaire n'a pas atteint le deuxième côté. C'est un triangle. On sélectionne un angle approprié et on peut facilement obtenir un triangle :

div {
    background: conic-gradient(from 90deg at 50% 0, deeppink 0, deeppink 45deg, transparent 45.1deg);
}

Le dans le code ci-dessus L'extra

est pour simple élimination Le dégradé produit l'effet irrégulier. De cette façon, nous pouvons facilement obtenir un triangle passant par

. deeppink 45deg, transparent 45.1deg0.1degDe même, avec la rotation conic-gradient ou

, nous pouvons également obtenir des triangles de différents angles et tailles. La démo complète peut être cliqué ici :

rotatescaleDémo CodePen - Utiliser. dégradé angulaire pour implémenter des triangles

https://codepen.io/Chokcoco/pen/qBRRZJr

transformation : rotation avec débordement : caché pour dessiner des triangles

Cette méthode est assez conventionnelle, utilisez en conjonction avec

. Vous pouvez le comprendre en un coup d'œil et l'apprendre en un coup d'œil. Le schéma d'animation simple est le suivant :

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

完整的代码：

.triangle {
    width: 141px;
    height: 100px;
    position: relative;
    overflow: hidden;
    
    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: deeppink;
        transform-origin: left bottom;
        transform: rotate(45deg);
    }
}

CodePen Demo - transform: rotate 配合 overflow: hidden 实现三角形

https://codepen.io/Chokcoco/pen/LYxyyPv

使用 clip-path 绘制三角形

clip-path 一个非常有意思的 CSS 属性。

clip-path CSS 属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。剪切区域是被引用内嵌的 URL 定义的路径或者外部 SVG 的路径。

也就是说，使用 clip-path 可以将一个容器裁剪成任何我们想要的样子。

通过 3 个坐标点，实现一个多边形，多余的空间则会被裁减掉，代码也非常简单：

div {
    background: deeppink;
    clip-path: polygon(0 0, 100% 0, 0 100%, 0 0);
}

CodePen Demo - 使用 clip-path 实现三角形

https://codepen.io/Chokcoco/pen/GRrmEzY

在这个网站中 -- CSS clip-path maker，你可以快捷地创建简单的 clip-path 图形，得到对应的 CSS 代码。

利用字符绘制三角形

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

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

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

譬如，我们使用 ▼ 实现一个三角形 ▼，代码如下：

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

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

效果还是不错的：

然而，需要注意的是，使用字符表示三角形与当前设定的字体是强相关的，不同的字体绘制出的同一个字符是不一样的，我在 Google Font 上随机选取了几个不同的字体，分别表示同一个字符，得到的效果如下：

可以看到，不同字体的形状、大小及基线都是不一样的，所以如果你想使用字符三角形，确保用户的浏览器安装了你指定的字体，否则，不要使用这种方式。

完整的对比 Demo，你可以戳这里：

CodePen Demo -   使用字符实现三角形

https://codepen.io/Chokcoco/pen/abpWyzy

最后

好了，本文到此结束，关于使用 CSS 绘制三角的 6 种不同方式，希望对你有帮助 :)

原文地址：https://segmentfault.com/a/1190000039808190

作者：chokcoco

更多编程相关知识，请访问：编程视频！！

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!