• 画等边三角形
      1.设定border与宽高
      1. div{
      2. border:50px solid red;
      3. width:50px;
      4. height:50px;
      5. border-top-color:green;
      6. border-bottom-color:yellow;
      7. border-left-color:pink;
      8. }

    CSS画三角形 - 图1
    :通过设定上下左右边距颜色,可发现分为四个梯形与一个正方形
    2.设定宽高为0

    1. div{
    2. border:50px solid red;
    3. width:0px;
    4. height:0px;
    5. border-top-color:green;
    6. border-bottom-color:yellow;
    7. border-left-color:pink;
    8. }

    CSS画三角形 - 图2
    :通过设定宽度为0px高度为0px,将梯形转变为三角形
    3.更改border颜色

    1. div{
    2. border:50px solid red;
    3. width:0px;
    4. height:0px;
    5. border-top-color:transparent;
    6. border-bottom-color:transparent;
    7. border-left-color:transparent;
    8. }

    CSS画三角形 - 图3

    :将其中三个border颜色设定为透明即可得出一个三角形

    • 画直角三角形
      CSS画三角形 - 图4
      border-top-width:图中蓝色线条距离
    1. 设置border-top为0
      1. div{
      2. border:50px solid red;
      3. width:0px;
      4. height:0px;
      5. border-top-color:green;
      6. border-bottom-color:yellow;
      7. border-left-color:pink;
      8. border-top-width:0px;
      9. }

    CSS画三角形 - 图5
    2.更改border颜色

    1. div{
    2. border:50px solid transparent;
    3. width:0px;
    4. height:0px;
    5. border-top-color:transparent;
    6. border-bottom-color:transparent;
    7. border-left-color:pink;
    8. border-top-width:0px;
    9. }

    CSS画三角形 - 图6
    3.代码优化

    1. div{
    2. border:50px solid transparent;
    3. width:0px;
    4. height:0px;
    5. border-left-color:pink;
    6. border-top-width:0px;
    7. }