CSS三角形

1.各种各样的三角形

等腰、等边、直角三角形

    div{ 
    border: 100px solid transparent;
    width: 0px;
    border-color: red yellow blue black;
    ｝

2.等腰、直角三角形

2.1四个等腰三角形

代码如下

body{  display: flex; }
.s1{
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-top: 50px solid blue;
    }
.s2{
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-right: 50px solid red;
    }
.s3{
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-bottom: 50px solid black;
    }
.s4{
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-left: 50px solid yellow;
    }

2.2等腰调节后

代码如下

.s1{
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-bottom: 50px solid blue;
    }
.s2{
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-bottom: 80px solid red;
    }
.s3{
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-bottom: 100px solid black;
    }
.s4{
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-bottom: 120px solid yellow;
}

2.3 可以改变border- bottom来生成其他三角形

只要把上面代码中的 bottom换成top

3.等边三角形

等边三角形

.s1{
    width: 0;
    height: 0;
    border: 100px solid transparent;
    border-bottom: 173px solid blue;
}

4. 直角三角形

直角三角形

.s1{
    width: 0;
    height: 0;
    border: 100px solid transparent;
    border-color:red red transparent transparent ;
}

可以改变 border-color: 上 右 下 左； 的颜色来改变直角的情况 ，下面是四种直角三角形，都是根据上面的变形得来的

直角三角形

其他种类的直角三角形

这四种就是调节基本类型中的相邻的两个三角形，代码如下

直角四

*{
  margin:15px
}
body{
  display: flex;
}
.s1{
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-top: 0px ;
    border-right: 80px solid red;
}
.s2{
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-bottom: 0px;
    border-left: 80px solid black ;
}
.s3{
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-left: 0px ;
    border-top: 80px solid yellow;
}
.s4{
    width: 0;
    height: 0;
    border: 30px solid transparent;
    border-left: 0px ;
    border-bottom: 100px solid blue;
}