<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS画图形</title><style>#circle{width: 200px;height: 200px;background-color: grey;border-radius: 100px;}#half-circle{width: 200px;height: 100px;background-color: blue;border-radius: 0 0 100px 100px;}#half-half-circle{width: 100px;height: 100px;background-color: grey;border-radius: 0 0 100px 0;}#up-triangle{width: 0;height: 0;border-left: 100px solid transparent;border-right: 100px solid transparent;border-bottom: 200px solid green;}#up-triangle2{width: 0;height: 0;border-left: 100px solid red;border-right: 100px solid yellow;border-top: 100px solid orange;border-bottom: 100px solid green;}#up-triangle3{width: 0;height: 0;border-left: 100px solid red;border-right: 100px solid yellow;border-bottom: 200px solid green;}</style>
</head>
<body><div style="float: left;"><div id="circle">正圆</div><div id="half-circle">半圆</div><div id="half-half-circle">四分之一圆</div></div><div id="up-triangle" style="float: left;">上三角形</div><div id="up-triangle2" style="float: left;"></div><div id="up-triangle3" style="float: left;"></div>
</body>
</html> 
画圆就用 border-radius：上 右 下 左
把圆水平垂直平均分四等分，从左上角开始顺时针依次为上、右、下、左，
想要哪边的圆就设置对应位置的半径，还能画出圆角矩形啥的
画三角形就用 border-top：长度 边框样式 颜色。
如上图正方形，奖正方形对角线平均分四等分，在顶部的就是top依次类推
想要朝哪的三角形，例如朝上，就把反方向bottom的设置为想要的高度（例如100px）、实线、颜色，其余对立位置设置为想要高度的一半（50px）、实线、透明
