用css写个三角形

痛定思痛。 2022-06-18 08:46 195阅读 0赞

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

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;

效果：  
![这里写图片描述][SouthEast 1]

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

效果：  
![这里写图片描述][SouthEast 2]

[SouthEast]: /images/20220618/a950214212ab470cbfc4e16ce7d4a314.png
[SouthEast 1]: /images/20220618/116215a10d40436d8ae52c1fdbf29b3a.png
[SouthEast 2]: /images/20220618/32737c3a68744a6a8d6df7b5a5d02737.png

发表评论取消回复

表情：

评论列表（有 0 条评论，195人围观）

还没有评论，来说两句吧...

相关阅读

相关怎么用css写出来一个三角形

使用CSS绘制三角形的方法之一是使用"border"属性。例如：div \{ width: 0; height: 0; border-left: 20px solid tra

我就是我/ 2024年03月25日 17:43/ 0 赞/ 96 阅读

相关 css画三角形(怎么用css画三角形)

如何用css3画一个有边框的三角形如果是一个正方形，我们写边时，会用到border，但我们这里讨论的三角形本身就是border，不可能再给border添加border属

素颜马尾好姑娘i/ 2023年09月26日 13:10/ 0 赞/ 62 阅读

相关用css写三角形

转自 [ http://bbs.blueidea.com/thread-2818535-1-1.html][http_bbs.blueidea.com_thread-28185

傷城~/ 2023年08月17日 16:20/ 0 赞/ 98 阅读

相关如何用 CSS 实现三角形

如何用 CSS 实现三角形 1. 绘制一个拥有四种不同边框颜色的正方形 2. 将正方形的宽度设为0，高度可以去掉

你的名字/ 2022年12月01日 11:59/ 0 赞/ 211 阅读

相关用css写个三角形

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

痛定思痛。/ 2022年06月18日 08:46/ 0 赞/ 196 阅读

相关用CSS画实心三角形和空心三角形

（1）实心三角形 html <div class='sanjiao'></div> css .sanjiao{ borde

偏执的太偏执、/ 2022年06月11日 07:08/ 0 赞/ 582 阅读

相关 css三角形

今天给大家带来 CSS 三角形绘制方法 ![640_wx_fmt_jpeg_tp_webp_wxfrom_5_wx_lazy_1][] \triangle-up

深藏阁楼爱情的钟/ 2022年06月05日 07:27/ 0 赞/ 249 阅读

相关 HTML+CSS写一个三角形（原理+实例）

写之前，首先要了解其中的原理 html代码只需创建两个名为triangle、triangle-left的div盒子即可，代码： <body>

怼烎@/ 2022年06月05日 03:58/ 0 赞/ 206 阅读

相关 html+css写三角形

首先我们来看下面一段代码在页面中的效果图： <!doctype html> <html> <head> <meta chars

悠悠/ 2022年05月09日 03:06/ 0 赞/ 162 阅读

相关 javascrip用零星写三角形

for(var i = 0;i<8;i ++){ for(var j=0;j<8; j++){ //

灰太狼/ 2021年12月04日 00:23/ 0 赞/ 211 阅读