CSS 边框三角形制作

由浅入深的介绍border属性，方便记忆。内联样式只为便于观察，最好避免此写法，采用更优的方案。

定义通用css

div.triangle{
    width:0;
    height:0;
}

只有上边框

<div class="triangle" style="border-top: 50px solid red;"></div>

效果图：上下占50px，但是看不见实际颜色。

只有上下边框

<div style="border-top: 50px solid red;
    border-bottom: 50px solid blue;">
</div>

效果图：原理同上，上下占100px，看不见实际颜色。

只有上左下边框

<div style="border-top: 50px solid red;
    border-bottom: 50px solid blue;
    border-left: 50px solid yellow;">
</div>

效果图：终于看见颜色了，说明必须相邻的边框搭配才会看见颜色。

正上角

<!-- triangle-up -->
<div style="border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;">
</div>

效果图：下边框100px，左右透明。

正下角

<!-- triangle-down -->
<div style="border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;">
</div>

效果图：上边框100px，左右透明。

正左角

<!-- triangle-left -->
<div style="border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-right: 100px solid red;">
</div>

效果图：右边框100px，上下透明。

正右角

<!-- triangle-right -->
<div style="border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-left: 100px solid red;">
</div>

效果图：左边框100px，上下透明。

---

下面更精彩哦！

左上角

<!-- triangle-topleft -->
<div style="border-top: 100px solid red;
    border-right: 100px solid transparent;">
</div>
<div style="border-left: 100px solid red;
    border-bottom: 100px solid transparent;">
</div>

效果图：上面的两个div对应下面的两个角。

---

相信看到这里，你应该知道css边框的原理了，快快动手试试右上、左下、右下的三角形吧。。。