html - 三 Angular 形 div 元素相对于其父元素的大小和位置

Question

我有一个子 div，它是一个彩色三 Angular 形:

 .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>

它位于背景图像(一堆灰度形状)之上:

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

如何让彩色三 Angular 形在大小和位置上与图像保持比例？

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;
}