前端 css 绘制三角形

1.边框线交界处的渲染关系

        html

<div class="one"></div>

        css

div.one {
  width:100px;
  height:100px;
  border-top:50px solid red;
  border-right:1px solid blue;
  border-bottom:50px solid yellow;
  border-left:50px solid black;
}

        画面

可以看出任意两条边框的交界处，是各取一半的位置，刚好形成一条斜线

2.有了斜线，此时就可以通过把盒子的宽高去掉

        css

div.one {
  width:0;
  height:0;
  border-top:50px solid red;
  border-right:50px solid blue;
  border-bottom:50px solid yellow;
  border-left:50px solid black;
}

        画面

留下了四条宽度50px的边框，因为互相交界，形成了四个三角形

3.通过透明交界颜色的边框，实现一种颜色的三角形

 如果要保留黄色三角形，则隐藏黑色和蓝色边框，红色则不需要

         css

div.one {
  width:0;
  height:0;
  --border-top:50px solid red;
  border-right:50px solid transparent;
  border-bottom:50px solid yellow;
  border-left:50px solid transparent;
}

        画面

得到了一个等腰直角三角形

4.等边三角形

          css

div.one {
  width:0;
  height:0;
  --border-top:50px solid red;
  border-right:50px solid transparent;
  border-bottom:100px solid yellow;
  border-left:50px solid transparent;
}

        画面

5.直角三角形

          css

div.one {
  width:0;
  height:0;
  --border-top:50px solid red;
  border-right:50px solid transparent;
  border-bottom:100px solid yellow;
  border-left:0px solid black;
}

        画面