HTML CSS

RESPONSIVE TRIANGLES IN HTML CSS

(a quick guide)

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

TRIANGLES WITH CSS BORDER

01

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;

TRIANGLE WITH CSS CLIP PATH

02

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; }

TRIANGLE IMAGE

03

HTML IMAGE  <img src="triangle.svg" class="demoC">