之前有讲过画尖角的，今天重新论述一下这个，来看一下下面的代码

<style>
    .style-1{
        height: 0;
        font-size: 0;
        line-height: 0;
        border-style: solid;
        border-width: 7px 7px 7px 0;
        border-color: transparent red;
    }
    .style-2{
        height: 0;
        font-size: 0;
        line-height: 0;
        border-style: solid;
        border-width: 7px 0px 7px 7px;
        border-color: transparent red;
    }
    .style-3{
        height: 0;
        font-size: 0;
        line-height: 0;
        border-style: solid;
        border-width: 7px;
        border-color: transparent red;
    }
    .style-4{
        height: 0;
        font-size: 0;
        line-height: 0;
        border-style: solid;
        border-width: 7px;
        border-color:  red transparent;
    }
</style>
<i class="style-1"></i><br>
<i class="style-2"></i><br>
<i class="style-3"></i><br>
<i class="style-4"></i>

这里代码其实不难理解，直接上效果图：

image.png