HTML CSS
(a quick guide)
RESPONSIVE DIMENSIONS :root { --w: calc(100vw / 30); --h: calc(var(--w) / 2); }
DRAW A TRIANGLE WITH CSS BORDER .demoA { width: 0; height: 0; border-left: var(--h) solid transparent; border-right: var(--h) solid transparent; border-bottom: var(--w) solid red; }
THE HTML <div class="demoA"></div>
.demoB { RESPONSIVE RECTANGLE width: 20%; height: 100px; background: red;
THE HTML <div class="demoB"></div>
CLIP INTO TRIANGLE clip-path: polygon(50% 0%, 0% 100%, 100% 100%); }
RESPONSIVE DIMENSION .demoC { width: 15%; height: auto; }
HTML IMAGE <img src="triangle.svg" class="demoC">