HTML CSS

RESPONSIVE TRIANGLES IN HTML CSS

DIMENSIONS :root {   --w: calc(100vw / 30);   --h: calc(var(--w) / 2); }

TRIANGLES WITH BORDER

01

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>

TRIANGLE WITH CSS CLIP PATH

02

RESPONSIVE DIMENSION .demo { width: 15%; height: auto; }   HTML IMAGE  <img src="triangle.svg" class="demo"/>

TRIANGLE IMAGE

03