边框三角形的实现

最新推荐文章于 2024-07-18 17:34:14 发布

paopaosama

最新推荐文章于 2024-07-18 17:34:14 发布

阅读量1.7k

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/paopaosama/article/details/82154265

版权

实用小知识：边框三角形

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

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

<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>

paopaosama

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
边框三角形的实现

实用小知识：边框三角形这里利用了这个知识点：同一个元素中，相邻的两个边框交接处是斜角。因此，如果我们需要在页面中实现一个三角形，可以通过设置边框来实现：<style> div{ width:0; height:0; border-width:10px; bord...
复制链接

扫一扫