Размер и положение элемента 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>

Он расположен поверхфоновое изображение (набор серых фигур):

Когда размер моего экрана / окна браузера уменьшается в размере, изображение изменяется, но треугольник явно не't:

Как сделать так, чтобы цветной треугольник оставался пропорциональным по размеру и положению изображению?

Answer 1

Если вы хотите изменить масштаб th 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;
}