RESPONSIVE TRIANGLES IN HTML CSS

[{"selector":"#anim-80d722b7-4efc-4ea9-8eee-d77412bfa6b1","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-52816510-7f88-4356-b452-f844d959100c","keyframes":{"transform":["translate3d(0px, 139.15628%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-205333be-a758-4bc1-81df-91ec95bf9fc4","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-4be685db-4763-49d7-b7bc-37dd236f8026","keyframes":{"transform":["translate3d(0px, -1332.06361%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-f9420a42-2d95-44cb-ac94-5bbe2baa07ec","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-a4fc0f5f-ffa5-4778-a2c7-8d89a845e3c6","keyframes":{"transform":["translate3d(0px, 294.07400%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] HTML CSS (a quick guide)

TRIANGLES WITH CSS BORDER

[{"selector":"#anim-b363bdeb-389f-4f78-8315-2d65c623a6d3","keyframes":{"opacity":[0,1]},"delay":100,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-2def30d3-ed75-4d0c-aa06-cb39a5fc220a","keyframes":{"transform":["translate3d(-115.2381%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":100,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-04c41668-2477-4d3e-9ed0-5cac0d151fcf","keyframes":{"opacity":[0,1]},"delay":200,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-b65d63be-da48-4645-80a2-87596b5e918e","keyframes":{"transform":["translate3d(-116.29393%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":200,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-611e600a-f9a9-4afb-bc96-3f84cfbb3143","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-1a8874b1-f7f8-46e5-a031-b48c4af44c1c","keyframes":{"transform":["translate3d(-115.60509%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] 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>

TRIANGLE WITH CSS CLIP PATH

[{"selector":"#anim-abd69453-1cea-493d-b414-4ef3d5eef18f","keyframes":{"opacity":[0,1]},"delay":100,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-33fb4fca-328d-4501-9a9d-c0be99d067b3","keyframes":{"transform":["translate3d(115.92356%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":100,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-653c3da9-1c62-471d-9672-4bf8b097377e","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-0c919e64-bb57-4a5c-b1e0-12952858e120","keyframes":{"transform":["translate3d(115.55555%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-58a23ffb-0792-4a27-8983-72e3e6ae0e74","keyframes":{"opacity":[0,1]},"delay":200,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-848671c9-5945-4887-984b-b2ccbf29dfb2","keyframes":{"transform":["translate3d(115.65496%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":200,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] .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%); }

TRIANGLE IMAGE

[{"selector":"#anim-28976113-1e56-411d-8ad3-ab78db89fe73","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-70f90330-56ca-49a6-8c76-730bb988f6ac","keyframes":{"transform":["translate3d(-114.55696%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-c99d7e71-d208-4a90-b510-3f1d7fbc7611","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-86dab629-80f9-4276-9927-e6bdd4d6047f","keyframes":{"transform":["translate3d(114.55696%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] RESPONSIVE DIMENSION .demoC { width: 15%; height: auto; } HTML IMAGE <img src="triangle.svg" class="demoC">

VISIT & FOLLOW

[{"selector":"#anim-f4a5611b-1266-4b5a-98bd-1090417a8d3e","keyframes":{"opacity":[0,1]},"delay":2000,"duration":1000,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-121792ce-20e4-4f0b-8c00-dcda34d5d2ee","keyframes":{"opacity":[0,1]},"delay":2000,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-d73d94f5-78a8-4333-bbce-e5f20299325e","keyframes":{"transform":["translate3d(-128.43511%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":2000,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-26e5a7ab-fecc-46b7-bccb-cc605cdc16c9","keyframes":{"opacity":[0,1]},"delay":2400,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-2db082cb-ef5c-4727-8db0-7e1fa6053bbf","keyframes":{"transform":["translate3d(-151.73267%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":2400,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-7458ce6c-eeef-477d-adcf-24a6bdb14104","keyframes":{"opacity":[0,1]},"delay":2600,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-d3d4594e-b455-47e8-b2d9-56c14226a1f8","keyframes":{"transform":["translate3d(-151.23154%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":2600,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-da2f8a05-3035-4e03-bb8a-7c2754159078","keyframes":{"opacity":[0,1]},"delay":2200,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-6e2ba8fd-6f3d-4be9-b91e-088f96247c11","keyframes":{"transform":["translate3d(-170.88234%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":2200,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-e00b1d3a-cc0a-4df9-afac-de6cf1022077 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(25%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}]

RESPONSIVE TRIANGLES IN HTML CSS

TRIANGLES WITH CSS BORDER

01

TRIANGLE WITH CSS CLIP PATH

02

TRIANGLE IMAGE

03

VISIT & FOLLOW

CODE BOXX YOUTUBE

CODE BOXX PINTEREST

FULL TUTORIAL