纯css实现三角形

2021-07-27 15:33:03 阅读：174 来源： 互联网

标签：right bottom 实现 100px solid 三角形 border css left

1. 首先，我们先来看看下面这段代码的效果，设置div块的宽、高，以及四周的boder，其中，四个border颜色不同，得到的结果如下图所示：

<style>
        .triangle {
            width: 100px;
            height: 100px;
            border-left: 100px solid green;
            border-right: 100px solid blue;
            border-bottom: 100px solid red;
            border-top: 100px solid yellow;
        }
 </style>

<body>
    <div class="triangle"></div>
</body>

2. 接下来，我们把div块的宽高设为0，再看下效果：

.triangle {
            width: 0px;
            height: 0px;
            border-left: 100px solid green;
            border-right: 100px solid blue;
            border-bottom: 100px solid red;
            border-top: 100px solid yellow;
}

看到没！！就是border重叠的部分，它从对角线处一分为二，颜色各一半，举个例子，如下图所示，黑色部分为俩border重叠的区域，那这个区域的颜色怎么分配的呢？就是从对角线处一分为二，一部分设置为粉色（left 边框的颜色），一部分设置为绿色（top边框的颜色）。

3. 我们再来看一下不同数量的边框组合组成的效果：

仅设置 left-border、right-border、bottom-border

设置 left、right、top

设置 top、bottom、left

设置 top、bottom、right

看到没有！！！我们想要的各个三角形就出来了！！！

4. 怎么得到三角形呢？根据自己的需求，把不同的方向的 border 设置为 transparent（透明）。举例如下：

等腰三角形

.triangle {
    width: 0px;
    height: 0px;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-bottom: 100px solid red;
}

想要高一点的等腰三角形怎么办嘞，那就把左右边框设置的细一点，各为一半。

.triangle {
    width: 0px;
    height: 0px;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-bottom: 200px solid red;
}

想要倒三角形怎么办呢？那就保留top-border，不要bottom-border
至于等边三角形，则需要自己去计算，比如边长度为 200，那么 left-border、right-border 宽度都设置为100，bottom-border 宽度设置为 100 * 根号3 （大家可以画一下）

.triangle {
    width: 0px;
    height: 0px;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-bottom: 173.2px solid red;
}

大家可以自己去试试，我就不再继续举例啦~

标签：right,bottom,实现,100px,solid,三角形,border,css,left
来源： https://www.cnblogs.com/Ersonnnn/p/15066117.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

纯css实现三角形