三角形div元素到其父元素的大小和位置

Question

我有一个子div，它是一个彩色三角形：

 .shape-triangle {
     width: 0;
     height: 0;
     border-left: 25px solid transparent;
     border-right: 25px solid transparent;
     border-bottom: 50px solid green;
     /* put on top of image */
     position: absolute;
     top: 20px;
     left: 110px;
}

嵌套在带有背景图片的Bootstrap列中：

<div class="col-12 col-lg-6 text-center">
    <div class="shape-triangle"></div>
    <img src="assets/background.png" alt="Image">
</div>

它位于背景图像（一堆灰度形状）的顶部：

当我的屏幕/浏览器窗口缩小时，图像会调整大小，但三角形显然不会：

如何使彩色三角形与图像的大小和位置保持比例？

Answer 1

如果要使用屏幕尺寸或其父级重新缩放div，则需要对%使用单位.shape-triangle。单位px永远不会工作，因为它会保持该大小，而父.col-12会发生变化。对于边框，您需要单位rem，该单位将大小与根字体相关。

所以我的建议将是这样的（您将不得不使用%和rem来看看什么是最好的）。

.shape-triangle {
     border-left: 2.5rem solid transparent;
     border-right: 2.5rem solid transparent;
     border-bottom: 5rem solid green;
     /* keep on its position and size */
     position: absolute;
     top: 20%;
     left: 50%;
     width: 0;
     height: 0;
}