Question 419761 in Html Question posted in
Some basic documentation can be found here.

Html – I can't get the red triangle to fix on bottom with same size

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:

enter image description here

Tags:

2

Answers


  1. 0

    One gradient and a clip-path can do the job:

    .flag {
  width: 300px;
  aspect-ratio: 2;
  background: conic-gradient(at top,blue 135deg,red 0 225deg,black 0);
  clip-path: polygon(0 0,100% 0,100% 100%,50% 0,50% 50%,75% 100%,25% 100%,50% 50%,50% 0,0 100%);
}
    <div class="flag"></div>

    Or two gradients:

    .flag {
  width: 299px;
  aspect-ratio: 2;
  background: 
    conic-gradient(from 135deg,red 90deg,#0000 0),
    conic-gradient(at top,blue 135deg,white 0 225deg,black 0);
}
    <div class="flag"></div>
    Login or Signup to reply.
  2. 0

    As suggested in the comments, an SVG is much easier.

    svg {
  height: 90vh;
  outline: 1px solid grey;
}

.blue {
  fill: blue;
}

.red {
  fill: darkred;
}
    <svg viewbox="0 0 600 400">

  <path d="M 0,0 
           L300,0
           L00,400 Z"/>
  <path class="blue"
         d="M 300,0 
           L600,0
           L600,400 Z"/>
    <path class="red"
         d="M 300,200 
           L150,400
           L450,400 Z"/>
</svg>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search