css绘制三角、三角强化

最基础的原理代码，一个没有宽度和高度的盒子，边框设置大小

css代码

.box {
        width: 0;
        height: 0;
        border-top: 10px solid orangered;
        border-bottom: 10px solid blue;
        border-left: 10px solid red;
        border-right: 10px solid black;
    }
    html代码：
    <div class="box"></div>

效果样式：

所以设置一个边框颜色，三个边框颜色为透明，就会产生三角

div {
width: 0;
height: 0;
line-height: 0;
font-size: 0;
border: 20px solid transparent;
border-top-color: red;
}
line-height:0;
font-size:0; //是为了兼容低版本的浏览器，高版本的浏览器可以不写这两句

案例样式：

css部分
.box {
position: relative;
width: 50px;
height: 50px;
background: royalblue;
}
.box span {
position: absolute;
width: 0;
height: 0;
left: 49px;
top: 7px;
line-height: 0; /*为了照顾低版本浏览器 */
font-size: 0;
border: 10px solid transparent;
border-left-color: royalblue;
}
HTML部分
<div class="box">
<span></span>
</div>

1、只保留右边的边框有颜色
border-color: transparent red transparent transparent;
2、样式都是solid
border-style: solid;
3、上边框宽度要大，右边框宽度稍小，其余边框该为0
border-width: 100px 50px 0 0;