圆形的原理不必多说，三角形的原理是使用border，border呈扇形向外展开，当width为0时，就是三角形，可以给四个方向的border设置不同的颜色，查看效果图就能一目了然。
<!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>.circle {width: 50px;height: 50px;background-color: bisque;border-radius: 100%;}.trangle {width: 0px;border: 50px solid transparent;border-left-color:sandybrown;}</style>
</head>
<body><div class="circle"></div><div class="trangle"></div>
</body>
</html>
结果如下所示：
