css利用border画三角形原理
2024-09-23 本文已影响0人
CoderZb
- 1、先对一个有宽高的div设置边框看看效果，可以看到两个相邻的边框交汇处是
45度角，不是水平也不是垂直的。
注意：边框宽度为50，指的是水平和垂直方向的宽度
image.png
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>测试</title>
</head>
<body>
<div class="triangle"></div>
</body>
</html>
<style>
.triangle {
width: 100px;
height: 100px;
border: 50px solid;
border-color: pink yellow red blue;
}
</style>
- 2、再对一个没有宽高的div设置边框看看效果
注意：边框宽度为50，指的是水平和垂直方向的宽度。所以这里50，指的是中心点距离正上、正右、正下、正左的距离为50
image.png
.triangle {
width: 0px;
height: 0px;
border: 50px solid;
border-color: pink yellow red blue;
}
-
3、左边框宽度为0
image.png
Untitled.gif
.triangle {
width: 0px;
height: 0px;
border-top: 50px solid pink;
border-right: 50px solid yellow;
border-bottom: 50px solid red;
border-left: 0px solid blue;
}
-
4、下边框宽度为0
image.png
Untitled.gif
.triangle {
width: 0px;
height: 0px;
border-top: 50px solid pink;
border-right: 50px solid yellow;
border-bottom: 0px solid red;
border-left: 50px solid blue;
}
-
5、右边框宽度为0
image.png
Untitled.gif
.triangle {
width: 0px;
height: 0px;
border-top: 50px solid pink;
border-right: 0px solid yellow;
border-bottom: 50px solid red;
border-left: 50px solid blue;
}
-
6、上边框宽度为0
image.png
Untitled.gif
.triangle {
width: 0px;
height: 0px;
border-top: 0px solid pink;
border-right: 50px solid yellow;
border-bottom: 50px solid red;
border-left: 50px solid blue;
}
总结：
- 1、如果你想要画一个
上三角，则四个方向的border，border-top为0，其余方向border都有值，且border-left和border-right设置为透明
image.png
.triangle {
width: 0px;
height: 0px;
border-top: 0px solid pink;
border-right: 50px solid transparent;
border-bottom: 50px solid red;
border-left: 50px solid transparent;
}
- 2、如果你想要画一个
下三角，则四个方向的border，border-bottom为0，其余方向border都有值，且border-left和border-right设置为透明
image.png
.triangle {
width: 0px;
height: 0px;
border-top: 50px solid pink;
border-right: 50px solid transparent;
border-bottom: 0px solid red;
border-left: 50px solid transparent;
}
- 3、如果你想要画一个
左三角，则四个方向的border，border-left为0，其余方向border都有值，且border-top和border-bottom设置为透明
image.png
.triangle {
width: 0px;
height: 0px;
border-top: 50px solid transparent;
border-right: 50px solid yellow;
border-bottom: 50px solid transparent;
border-left: 0px solid blue;
}
- 3、如果你想要画一个
右三角，则四个方向的border，border-为0，其余方向border都有值，且border-top和border-bottom设置为透明
image.png
.triangle {
width: 0px;
height: 0px;
border-top: 50px solid transparent;
border-right: 0px solid yellow;
border-bottom: 50px solid transparent;
border-left: 50px solid blue;
}
