I wrote this code for a flag “NZ REDPEAK FLAG”, I have the two black and blue triangles done. But this red triangle is supposed to be an isosceles triangle, congruent to the empty space in the center but smaller and the base (different length side) to be fixed on the bottom.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NZ REDPEAK FLAG</title>
<style>
.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;
}
</style>
</head>
<body>
<div class="flag-base">
<div class="blue-part"></div>
<div class="black-part"></div>
<div class="red-part"></div>
</div>
</body>
</html>
Maybe because the triangles dont have height or width, is why it gets distorted when I set position to relative. I got the two right angle triangles on the left and right, where the base is the top of div and height are on the left and right respectively. Causing the hypotenuses of both making an empty space of isosceles triangle. After which I tried making a triangle with same angles as the space but smaller, to be centered on the bottom. But I got the triangle, just can’t seem to get it to stay on bottom.
Goal:
