RESPONSIVE TRIANGLES IN HTML CSS

[{"selector":"#anim-f328a08a-3a1f-45f1-908a-dd61ceb70189","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-bf070bad-d319-4efe-b1fb-0dc37624ca04","keyframes":{"transform":["translate3d(0px, 222.57871%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-a4d490ff-f6c5-4261-99d5-726de63fdfa8","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-5974f998-f90a-4430-a69c-de63254fb4e4","keyframes":{"transform":["translate3d(0px, -829.20633%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] HTML CSS

TRIANGLES WITH BORDER

[{"selector":"#anim-9df3850f-c6f7-41d0-bfd6-a5c9b92d28b6","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-7899602c-fc30-4ed3-b0ed-678d97d285ef","keyframes":{"transform":["translate3d(-117.64707%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-d12a9205-0ca9-44c6-91d6-5d9ae7368890","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-afff1adf-efa2-4b8f-8985-e6daff75ffe7","keyframes":{"transform":["translate3d(115.14195%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] 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>

TRIANGLE WITH CSS CLIP PATH

[{"selector":"#anim-1539804f-71c1-482d-8e02-f56e1560be71","keyframes":{"transform":["translate3d(-115.18988%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-f09f6060-ccb7-4151-aa6c-d8ffd8d4681e","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-7074328b-8dfc-4e65-9e27-50cc4027a142","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] .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 IMAGE

[{"selector":"#anim-3c82742e-4e20-4ad8-a803-f743baa7aa66","keyframes":{"transform":["translate3d(115.18987%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-e5049880-dae2-47f3-b73e-58b3601eb8a6","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-93694cf6-a079-49f6-a5dd-021372c80f1b","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] RESPONSIVE DIMENSION .demo { width: 15%; height: auto; } HTML IMAGE <img src="triangle.svg" class="demo"/>

FULL TUTORIAL

[{"selector":"#anim-c257fd0d-f629-49af-b437-153fabfa7e2a","keyframes":[{"transform":"scale(1)","offset":0},{"transform":"scale(1.5)","offset":0.33},{"transform":"scale(0.95)","offset":0.66},{"transform":"scale(1)","offset":1}],"delay":0,"duration":1450,"easing":"ease-in-out","fill":"both","iterations":1}] [{"selector":"#anim-ba088a06-4d0f-4edd-8c66-e1ab86a97efb","keyframes":[{"transform":"scale(1)","offset":0},{"transform":"scale(1.5)","offset":0.33},{"transform":"scale(0.95)","offset":0.66},{"transform":"scale(1)","offset":1}],"delay":0,"duration":1450,"easing":"ease-in-out","fill":"both","iterations":1}] [{"selector":"#anim-de482582-67a3-4909-97d3-c791a410b970","keyframes":[{"transform":"scale(1)","offset":0},{"transform":"scale(1.5)","offset":0.33},{"transform":"scale(0.95)","offset":0.66},{"transform":"scale(1)","offset":1}],"delay":0,"duration":1450,"easing":"ease-in-out","fill":"both","iterations":1}]

RESPONSIVE TRIANGLES IN HTML CSS

TRIANGLES WITH BORDER

01

TRIANGLE WITH CSS CLIP PATH

02

TRIANGLE IMAGE

03

FULL TUTORIAL

VISIT & FOLLOW

CODE BOXX YOUTUBE

CODE BOXX PINTEREST