纯css制作三角形

SoloTravelerHQ

于 2021-09-26 20:58:31 发布

阅读量264

点赞数

CC 4.0 BY-SA版权

分类专栏：前端笔记文章标签： css html html5

本文链接：https://blog.csdn.net/huangqiang80/article/details/120496946

前端笔记专栏收录该内容

10 篇文章

订阅专栏

本文介绍了如何使用纯CSS来创建三角形的技巧，通过调整元素的border属性，实现不同方向的三角形效果。首先，通过设置宽高为0且边框颜色渐变形成梯形，然后通过移除特定边框并设定透明边框，即可得到所需的三角形。这种方法在前端开发中常用于创建箭头等形状。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

纯css制作三角形

纯css制作三角形的原理是通过设置元素border的属性来达到的。我们先将一个div的border上下左右设置不同的颜色，可以看到border其实是一个梯形。

div {
    width: 100px;
    height: 100px;
    border: 10px solid red;
    border-color: red orange blue yellow;
}

在这里插入图片描述

现在我们将div的宽度和高度设置成0，可以看到现在是四个小三角形

div {
    width: 0px;
    height: 0px;
    border: 10px solid red;
    border-color: red orange blue yellow;
}

在这里插入图片描述

然后根据我们的需求，来选取不同方向的小三角形，以下方的三角形为例，我们将border-top去掉，将border-left和border-right的颜色设置成透明，就得到了我们想要的三角形了。

div {
    width: 0px;
    height: 0px;
    border: 10px solid red;
    border-top: none;
    border-color: transparent transparent blue transparent;
}

在这里插入图片描述