前端面试之CSS三角合集
三角形的实现是基于矩形来实现的,然后通过给矩形的四个边选择性增加border,来实现各种各样的三角形。
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;
}
- 将中间粉色的矩形的宽高设为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;
}
- 要得到绿色的三角形,需要把其余的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.实现一个普通三角形
形如:
- 首先和刚刚的胖三角形类似,完成一个矩形,然后加border
#triangle-up2{
width: 100px;
height: 100px;
border-left: 50px solid green;
border-right: 50px solid pink;
border-bottom: 100px solid red;
}
- 设置中间的矩形宽高为0
#triangle-up2{
width: 0px;
height: 0px;
border-left: 50px solid green;
border-right: 50px solid pink;
border-bottom: 100px solid red;
}
- 保留红色的三角形,将左右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.实现一个直角三角形
实现直角三角形的原理和上面三角形实现步骤一样,但是个人感觉有点难以想象出实现的步骤,所以还是走一遍过程
- 完成一个矩形,然后加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;
}
- 保留红色三角形
#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;
}
还有更多的三角形等着和大家一起去探索啦
欢迎大家在评论区留言~