利用border-color来实现三角形或者梯形等
<style>
.box{
width: 200px;
height: 200px;
border: 100px solid;
border-color: red black blue purple;
}
</style>
实现效果:
<style>
.box1{
width: 0;
height: 0;
border: 100px solid;
border-color: rebeccapurple transparent transparent transparent;
}
</style>
实现效果:
<style>
/* 实现一个梯形*/
.box3{
width: 200px;
height: 200px;
border:100px solid;
border-color: rebeccapurple transparent transparent transparent;
}
</style>
实现效果:
<style>
.box4{
width: 0;
height: 0;
border: 100px solid;
border-color: rebeccapurple rebeccapurple transparent transparent;
}
</style>
实现效果: