之前有讲过画尖角的，今天重新论述一下这个，来看一下下面的代码
<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
