css实现三角形

上三角

<div class="three"></div>
.three {
    width: 0;
    height: 0;
    border: 40px solid transparent;
    border-bottom-color: green;
}

右三角

<div class="three"></div>
.three {
    width: 0;
    height: 0;
    border: 40px solid transparent;
    border-left-color: orange;
}

下三角

<div class="three"></div>
.three {
    width: 0;
    height: 0;
    border: 40px solid transparent;
    border-top-color: red;
}

左三角

<div class="three"></div>
.three {
    width: 0;
    height: 0;
    border: 40px solid transparent;
    border-right-color: rgb(0, 204, 255);
}