html - 三角形 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>

它位于背景图像（一堆灰度形状）之上：

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

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

标签： htmltwitter-bootstrapcssbootstrap-4

Answer 1

如果要使用屏幕大小或其父级重新缩放 div，则需要%使用.shape-triangle. 单元px永远不会工作，因为它保持那个大小，而父级.col-12正在改变。对于边框，您需要 unit 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;
}