边框三角形的实现

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

paopaosama

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

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

文章标签： css html

本文链接：https://blog.youkuaiyun.com/paopaosama/article/details/82154265

博客介绍了在页面中利用CSS和HTML实现边框三角形的方法。利用元素相邻边框交接处是斜角这一特性，将元素宽高设为0，边框样式设为实心，三条边颜色设为透明，一条边设为所需颜色，即可实现。还提及改变方向和大小的方法。

实用小知识：边框三角形

这里利用了这个知识点：同一个元素中，相邻的两个边框交接处是斜角。

因此，如果我们需要在页面中实现一个三角形，可以通过设置边框来实现：

<style>
        div{
            width:0;
            height:0;
            border-width:10px;
            border-style:solid;
            border-color:transparent transparent #f0a238;
        }
    </style>

实现思路：

1.元素的宽高必须为0；

2.宽度随意；

3.边框样式为实心；

4.重点来了：三条边的颜色为transparent,即透明的，一条边框为你要的三角形的颜色。

5:三角形的底边是相邻两条边的宽度相加；高是该条边的宽度。

这样就实现了一个小三角形。

如果要改变三角形的方向，就把有颜色的边改为另一边。

三角形的大小由边框的宽度控制。四条边的宽度不一致，就会出现各式各样的三角形。

只要记住上面的1/4/5知识点就可以了，大家放心大胆的敲代码试一试就更加明白如何实现边框三角形啦~

看我做出来的三角形 →_→

代码粘上来:

    <style>
        .box4{
            width:0;
            height:0;
            border-width:10px;
            border-style:solid;
            border-color:transparent transparent #f0a238;
        }
        .box1{
            width:0;
            height:0;
            border-width:10px 10px 50px 40px;
            border-style:solid;
            border-color:transparent transparent red;
        }
        .box2{
            width:0;
            height:0;
            border-width:1px 5px 70px 100px;
            border-style:solid;
            border-color:transparent  red transparent transparent;
        }
        .box3{
            width:0;
            height:0;
            border-width:10px 10px 50px 40px;
            border-style:solid;
            border-color:green transparent transparent ;
        }
    </style>

<body>
    <div class="box4"></div>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>