实线黑色边框_前端小技巧（一）：边框写三角形

最新推荐文章于 2024-01-09 17:12:53 发布

颐爻

最新推荐文章于 2024-01-09 17:12:53 发布

阅读量411

点赞数

文章标签：实线黑色边框

本文链接：https://blog.csdn.net/weixin_34183702/article/details/112613763

版权

本文探讨了如何使用CSS边框创建三角形的原理和技巧，通过改变边框颜色、宽度及样式，实现不同类型的三角形，包括等腰三角形、不规则三角形和直角三角形。

摘要由CSDN通过智能技术生成

边框写三角形，这个技能从事前端的小伙伴应该都不陌生，不过大多数都是知其然而不知其所以然，今天我们就来探究一下这里面的原理

随意的在页面上给一个盒子，然后给一个边框来看看

div{
    width:100px;
    height:100px;
    border:10px solid #f00283;
}

这样的一段代码，给到盒子的宽高都是100像素，然后10个像素实线的红色边框，效果图如下，看起来没有什么特别的，好像和三角形也没什么关系

但是当我们把每一条边的颜色改得不一样的时候，就能看出来一些端倪了

div{
    width:100px;
    height:100px;
    border:10px solid #f00283;
    border-color: #000 #aaa #333 #999;
}

可以看到，当每一条边的颜色都不一样的时候，每两条边交汇的地方是一个斜角。其实这个斜角一直都存在，只是当我们两条边的颜色一样的时候看不出来而已，曾经也有人在面试的时候问到过这个问题：边框是什么形状的？大家现在可有答案了？

不过从这里来看的话，虽然有一个斜角了，但是和三角形好像还是没有太大的关系啊？不着

关注