一、首先用以下代码画出一个正方形。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS三角形</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: orange;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
二、引用clip-path: polygon()属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS三角形</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: orange;
clip-path: polygon(0 0, 200px 0, 0px 200px, 0px 200px);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
效果如图：
接下来介绍一下clip-path: polygon()的原理：
括号内用逗号隔开了四组数据，这些数据对应的是坐标，即（x,y）；每一组坐标都是以原正方形左上角的点为原点，按照ABCD的顺序依次连接起来。
了解了原理，那么我们只需要把C点的坐标换成和B点或D点相同即可实现连线图是一个三角形。
clip-path: polygon(0 0, 200px 0, 0px 200px, 0px 200px);
或
clip-path: polygon(0 0, 200px 0, 200px 0px, 0px 200px);
clip-path: polygon()里的坐标可以采用数值，也可以采用百分数。坐标组也不局限于四组，可以写非常多组，只需按照顺序连接起来即可。示例如下：
