之前有講過畫尖角的,今天重新論述一下這個(gè)宾袜,來看一下下面的代碼
<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>
這里代碼其實(shí)不難理解狰右,直接上效果圖: