css中制作小三角形思路(我是通过边框制作的)：
先想好自己想设置方向朝哪边的三角形，这里我制作方向朝上的三角形(其他方向类似)
代码即思路如下：
<!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>Document</title>
<style>
body{
background-color: antiquewhite;
}
.box1{
/* 1.首先设置盒子宽高都为0 */
width: 0;
height: 0;
/*2.设置盒子上下左右边框(注意:根据三角形大小调整边框粗细,颜色要设置为透明transparent) */
border: 8px solid transparent;
/*3.根据三角形方向选择设置哪个方向边框为none
技巧:设置三角形正对方向的边框为none,比如我想设置朝上的三角形，那就设置上边框为none*/
border-top: none;
/*4.最后设置边框颜色，显示出三角形*/
border-bottom-color: red;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
效果图：
