【CSS】带边框的三角形

34840-106.jpg

image.png

思路是将2个三角形叠加起来，外层的三角形稍微大一些。

思路和《【CSS】内圆角》这个笔记的 “方法一” 类似。
http://www.jianshu.com/p/6e61856cf143

这个笔记最后会补充《【CSS】画三角形》这个笔记里记漏的一点。
http://www.jianshu.com/p/2c04549a8aae

HTML代码：

<div class="parent">
    <div class="child"></div>
</div>

CSS代码：

.parent {
    width: 0px;
    height: 0px;
    border-width: 0 100px 100px;
    border-style: solid;
    border-color: transparent transparent #333;
    position: relative;
}
.child {
    width: 0px;
    height: 0px;
    border-width:0 90px 90px;
    border-style:solid;
    border-color:transparent transparent #fc0;          
    position: absolute;
    top: 6px;
    left: -90px;
}

以上是最终代码。

---

逐步分析：

CSS：

.parent {
    width: 0px;
    height: 0px;
    border-width: 0 100px 100px;
    border-style: solid;
    border-color: transparent transparent #333;
}
.child {
    width: 0px;
    height: 0px;
    border-width:0 90px 90px;
    border-style:solid;
    border-color:transparent transparent #fc0;          
}

一开始的思路是分别生成外层和内层的三角形。得到的效果如下图所示。

image.png

之所以会出现这种情况，是因为内层嵌套的元素，会在外层元素的正式内容部分开始出现。看看下面的盒子模型。

image.png

嵌套的内容，都会从黄色框（content）的左上角开始出现。
再看下图：

image.png

根据红色的指示线可以看得出，黄色三角形左边的角和黑色三角形上面的角是在同一水平线上的。所以黄色三角形（嵌套的）应该向左移动。

向左移动距离 = 黄色三角形border的值。
左负 右正

向下移动距离 = （黑border - 黄border）/ 2 +1
上负 下正

---

最后回顾一下border的用法

border可以一次设置4条边的所有属性，
如：
border: 1px solid #eee;
这就把4条边都设置成1像素的实线，且颜色为灰色。

可以把所有属性分开设置，
如：
border-width: 10px;
这就把4条边都设置成10px。

可以分别设置4条边同一属性的不同值，并写在同一行代码里。
如：
border-width: 1px 2px 3px 4px;
对应是顺序是：上 右 下 左

如果只设置两个值，如：
border-width: 1px 3px;
对应：上下 左右

如果只设置三个值，如：
border-width: 1px 2px 3px;
对应：上 左右 下。
即：上 1px 左右 2px 下 3px

---

希望以上笔记对大家有帮助。
我的其他笔记在微信公众号：Rabbit_svip

image