用css写个三角形

最新推荐文章于 2025-06-21 09:15:59 发布

原创最新推荐文章于 2025-06-21 09:15:59 发布 · 457 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

css 专栏收录该内容

10 篇文章

订阅专栏

本文介绍如何仅使用CSS属性来创建不同方向的三角形图案。通过调整边框颜色和大小，可以轻松改变三角形的方向及外观。

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

在百度前端学院任务重遇到了这个，之前也接触过，在这里写一下吧。
这里写图片描述
就是上面这个三角形。
我是这样写的

div{
width: 0;
height: 0;
border-top:5px solid #f7ded9;
border-left:5px solid #f7ded9;
border-right:5px solid #f7ded9;
border-bottom:5px solid #5b5b5b;
}

<div></div>

这样就有了上面的那个三角形，
当然，这个三角形的方向时可以变的，方法就是更改下面的参数：
border-top:5px solid #f7ded9; border-left:5px solid #f7ded9; border-right:5px solid #f7ded9; border-bottom:5px solid #5b5b5b;
更改大小不用说了，参数里面就一个是size参数。方向是根据颜色改变，在上面的例子中，border-top，border-left，border-right的颜色参数与北京相同，只有border-bottom的颜色有改变，这就形成了一个上图所示的三角形。
改一下吧：

 border-bottom:5px solid #f7ded9;
border-left:5px solid #f7ded9;
border-right:5px solid #f7ded9;
border-top:5px solid #5b5b5b;

效果：
这里写图片描述

width:0;height:0;
        border-bottom:5px solid #f7ded9;
        border-left:5px solid #f7ded9;
        border-top:5px solid #f7ded9;
        border-right:5px solid #5b5b5b;

效果：
这里写图片描述