Я написал этот код для флага «NZ REDPEAK FLAG», у меня готовы два черного и синего треугольника. Но этот красный треугольник должен быть равнобедренным, равным пустому пространству в центре, но меньшего размера, а основание (сторона разной длины) должно быть закреплено внизу.
Код: Выделить всё
NZ REDPEAK FLAG
.flag-base {
height: 400px;
width: 600px;
position: relative;
}
.blue-part {
height: 0px;
width: 0px;
position: absolute;
left: 300px;
border-right: 300px solid blue;
border-bottom: 400px solid transparent;
}
.black-part {
height: 0px;
width: 0px;
position: absolute;
border-left: 300px solid black;
border-bottom: 400px solid transparent;
}
.red-part {
height: 0;
width: 0;
border-right: 250px solid transparent;
border-left: 250px solid transparent;
border-bottom: 300px solid red;
margin-left: auto;
margin-right: auto;
}
Возможно, потому, что у треугольников нет высоты и ширины, они искажаются, когда я устанавливаю относительное положение. У меня есть два прямоугольных треугольника слева и справа, где основание — это вершина элемента div, а высота — слева и справа соответственно. В результате гипотенузы обоих образуют пустое пространство равнобедренного треугольника. После этого я попытался создать треугольник с теми же углами, что и пространство, но меньшего размера, чтобы центрировать его внизу. Но треугольник у меня есть, но никак не могу заставить его остаться внизу.
Цель:
Подробнее здесь:
https://stackoverflow.com/questions/793 ... -same-size
Мобильная версия