css-三角形代码（各种角度）

简介

原理记忆：
三角形实现原理：宽度width为0；height为0；
（1）有一条横竖边（上下左右）的设置为border-方向：长度 solid red，这个画的就是底部的直线。其他边使用border-方向：长度 solid transparent。指的是：triangleUp、triangleDown、triangleLeft、triangleRight
（2）有两个横竖边（上下左右）的设置，若斜边是在三角形的右边，这时候设置top或bottom的直线，和右边的斜线。若斜边是在三角形的左边，这时候设置top或bottom的直线，和左边的斜线。指的是：triangleTopLeft、triangleTopRight、triangleBottomLeft、triangleBottomRight

---

html

<div id="triangleUp">
 triangleUp
</div>
<div id="triangleDown">
  triangleDown
</div>
<div id="triangleLeft">
  triangleLeft
</div>
<div id="triangleRight">
  triangleRight
</div>
<div id="triangleTopLeft">
  triangleTopLeft
</div>
<div id="triangleTopRight">
  triangleTopRight
</div>
<div id="triangleBottomLeft">
  triangleBottomLeft
</div>
<div id="triangleBottomRight">
  triangleBottomRight
</div>

css

#triangleUp {
   width: 0px;
   height: 0px;
   border-bottom: 100px solid red;
   border-left: 50px solid transparent;
   border-right: 50px solid transparent;
 }
 #triangleDown {
   width: 0px;
   height: 0px;
   border-top: 100px solid red;
   border-left: 50px solid transparent;
   border-right: 50px solid transparent;
 }
 #triangleLeft {
   width: 0px;
   height: 0px;
   border-right: 100px solid red;
   border-top: 50px solid transparent;
   border-bottom: 50px solid transparent;
 }
 #triangleRight {
   width: 0px;
   height: 0px;
   border-left: 100px solid red;
   border-top: 50px solid transparent;
   border-bottom: 50px solid transparent;
 }
 #triangleTopLeft {
   width: 0px;
   height: 0px;
   border-right: 100px solid transparent;
   border-top: 100px solid red;
 }
 #triangleTopRight {
   width: 0px;
   height: 0px;
   border-left: 100px solid transparent;
   border-top: 100px solid red;
 }
 #triangleBottomLeft {
   width: 0px;
   height: 0px;
   border-right: 100px solid transparent;
   border-bottom: 100px solid red;
 }
 #triangleBottomRight {
   width: 0px;
   height: 0px;
   border-left: 100px solid transparent;
   border-bottom: 100px solid red;
 }

图示