老师为什么这两个三角形的角不是粘在一起的呀
来源：2-11 编程练习
慕哥6503273
2021-01-25 16:56:11
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 0;
height: 0;
border: 200px solid transparent;
}
.a{
border-top-color: #000;
position: relative;
}
.b{
border-bottom-color: #000;
position: absolute;
bottom: 400px;
left: 0;
}
</style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
</body>
</html>
1回答
-
好帮手慕久久
2021-01-25
同学你好，由于bottom设置太小了，所以导致两个三角形之间有间隙，从而没粘在一起。bottom的值，是相对于浏览器窗口底部计算的，如果窗口高度较大，而bottom值太小，就会造成两个三角形之间有间距：
在老师的分辨率下，如果将bottom增大些，就会让两个三角形粘在一起了：
由于不同的电脑分辨率不同，窗口高度也不同，所以设置bottom不太合理，bottom的值无法保证在任何分辨率下都能让三角形粘在一起。
建议将bottom值换成top值，让三角形相对窗口顶部定位，如下：
祝学习愉快！
0
相似问题