前端面试之CSS三角合集

前端面试之CSS三角合集

三角形的实现是基于矩形来实现的，然后通过给矩形的四个边选择性增加border,来实现各种各样的三角形。
1. 实现一个胖三角
形如：

咱们首先来解刨一下，这个三角形实现的步骤：

1. 首先完成一个矩形，然后给他的四周加上100px的border。
   

#triangle-up1 {
    width: 100px;
    height: 100px;
    background-color: pink;
    border-right: 100px solid red;
    border-left: 100px solid yellow;
    border-top:100px solid blueviolet;
    border-bottom:100px solid green;
}

2. 将中间粉色的矩形的宽高设为0px。
   

#triangle-up1 {
    width: 0px;
    height: 0px;
    background-color: pink;
    border-right: 100px solid red;
    border-left: 100px solid yellow;
    border-top:100px solid blueviolet;
    border-bottom:100px solid green;
}

3. 要得到绿色的三角形，需要把其余的border设置为透明色（因为需要占位置，所以不能将其余的border设置注释掉）
   

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

2.实现一个普通三角形
形如：

1. 首先和刚刚的胖三角形类似，完成一个矩形，然后加border
   

#triangle-up2{
    width: 100px;
    height: 100px;
    border-left: 50px solid green;
    border-right: 50px solid pink;
    border-bottom: 100px solid red;
}

2. 设置中间的矩形宽高为0

#triangle-up2{
    width: 0px;
    height: 0px;
    border-left: 50px solid green;
    border-right: 50px solid pink;
    border-bottom: 100px solid red;
}

3. 保留红色的三角形，将左右boder设置为透明色

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

当然将这个三角形180度旋转，实现和这个基本一样：

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

实现一个向右的三角形：

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

实现一个向左的三角形：

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

3.实现一个直角三角形
实现直角三角形的原理和上面三角形实现步骤一样，但是个人感觉有点难以想象出实现的步骤，所以还是走一遍过程

1. 完成一个矩形，然后加border
   

#triangle-TopLeft{
    width: 100px;
    height: 100px;
    border-top: 100px solid red;
    border-right: 100px solid blue;
}

2.设置中间的矩形宽高为0

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

3. 保留红色三角形
   
   #triangle-TopLeft{
   width: 0px;
   height: 0px;
   border-top: 100px solid red;
   border-right: 100px solid transparent;
   }

和上面的直角三角形类似，实现一个右上直角三角形：

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

实现一个左下直角三角形：

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

实现一个右下直角三角形：

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

ps：根据第二个普通三角形的实现，也不难实现这个直角三角形

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

上面的例子都是根据正方形为基础实现的三角形，其实普通的矩形也可以，这里加了个背景色，便于观察

#triangle-up1 {
    width: 0px;
    height: 0px;
    background-color: rgb(179, 207, 231);
    border-right: 50px solid transparent;
    border-left: 75px solid transparent;
    border-top:0px solid transparent;
    border-bottom:100px solid green;
}

还有更多的三角形等着和大家一起去探索啦
欢迎大家在评论区留言~