利用css构建三角形（正三角 倒三角 左/右三角）

上三角

#triangle-up {width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 100px solid red;}

下三角

#triangle-down {width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-top: 100px solid red;}

左三角

#triangle-left {width: 0;height: 0;border-top: 50px solid transparent;border-right: 100px solid red;border-bottom: 50px solid transparent;}

右三角

#triangle-right {width: 0;height: 0;border-top: 50px solid transparent;border-left: 100px solid red;border-bottom: 50px solid transparent;}

左上三角

#triangle-topleft {width: 0;height: 0;border-top: 100px solid red;border-right: 100px solid transparent;}

右上三角

#triangle-topright {width: 0;height: 0;border-top: 100px solid red;border-left: 100px solid transparent;}

左下三角

#triangle-bottomleft {width: 0;height: 0;border-bottom: 100px solid red;border-right: 100px solid transparent;}

右下三角

#triangle-bottomright {width: 0;height: 0;border-bottom: 100px solid red;border-left: 100px solid transparent;}