<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 所以border-xx-width控制的就是宽度和高度都为0的中心点到四边的距离，修改四个距离，可以做出想要的三角形，
,然后只要把不想要的边的颜色改成transparent，让它透明掉，只留下想要的边，就可以了*/
.triangle{
width: 0;
height: 0;
border: 20px solid pink;
border-top-color: red;
border-right-color: green;
border-bottom-color: blue;
border-left-color: yellow;
border-top-width: 20px;
border-right-width: 20px;
border-bottom-width: 20px;
border-left-width: 20px;
}
</style>
</head>
<body>
<div class="triangle"></div>
</body>
</html>
