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