css实现三角形

59 阅读1分钟
上三角

image.png

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

image.png

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

image.png

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

image.png

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