前端CSS border实现三角形border-color

最新推荐文章于 2020-06-13 12:05:51 发布

NFY-ting

最新推荐文章于 2020-06-13 12:05:51 发布

阅读量553

点赞数 1

分类专栏： css 文章标签：前端 CSS border 三角形div

本文链接：https://blog.csdn.net/weixin_44419845/article/details/89219105

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最近在写一个项目，然后想做一个带三角形的导航栏，然后突然发现自己还不知道前端怎么写出一个三角形（太菜了）。。。
然后本来打算用canvas画一个出来的，发现有点大材小用？？？然后百度才发现可以直接用border设置出来，然后学习了一下，发现还挺有意思的
大家平时都知道border是用来设置div边框的，但是一般都设置得很小，然后我们来看看当border变大后，有什么视觉效果
**html**

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

css

<style>
    .square{
       width: 100px;
        height: 100px;
        border: 20px solid;
        /* 分别设置上右下左边框的颜色 */
        border-color: red orange yellow green; 
    }
</style>

效果
在这里插入图片描述
是不是有种立体的感觉，然后我们会发现边框变成了梯形，name梯形和三角形之间怎么转换呢？
我们试着增大div的宽高
css

<style>
     .square{
        width: 200px;
        height: 200px;
        border: 20px solid;
        /* 分别设置上右下左边框的颜色 */
        border-color: red orange yellow green; 
    }
</style>

效果
在这里插入图片描述
我们发现紫色阴影部分变大了，这就是我们的div增大宽高的结果，是不是更加没有三角形的形状了呢？
那么我们来试着增大border的宽度
css

<style>
     .square{
        width: 100px;
        height: 100px;
        border: 60px solid;
        /* 分别设置上右下左边框的颜色 */
        border-color: red orange yellow green; 
    }
</style>

效果
在这里插入图片描述
我们发现形状更立体了，我们可以猜想，我们继续增大border的宽度，同时减小div的宽高，是不是没个border终会交汇，然后形成一个被四个三角形所分割的div呢？
答案是肯定的！！！
直接看效果：

当中间的空白部分没有时（即div的宽高为0）则为四个三角形
在这里插入图片描述
所以实现三角形的原理就是让div四边的边框平分他，当其他三面显示为透明色（背景色、transparent）时，就可以显现出来一个三角形。
最终CSS代码

<style>
     .square{
        width: 0;
        height: 0;
        border: 40px solid;
        /* 分别设置上右下左边框的颜色 */
        border-color: red transparent  transparent  transparent; 
    }
</style>

效果
在这里插入图片描述

NFY-ting

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端CSS border实现三角形border-color

最近在写一个项目，然后想做一个带三角形的导航栏，然后突然发现自己还不知道前端怎么写出一个三角形（太菜了）。。。然后本来打算用canvas画一个出来的，发现有点大材小用？？？然后百度才发现可以直接用border设置出来，然后学习了一下，发现还挺有意思的大家平时都知道border是用来设置div边框的，但是一般都设置得很小，然后我们来看看当border变大后，有什么视觉效果**html**&...
复制链接

扫一扫