RESPONSIVE TRIANGLES IN HTML CSS

[{"selector":"#anim-bb73e950-ae65-4f7b-afb4-9e0fceef835e","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-75cc1c75-f1dd-4d96-b6a4-5b86bed01ddb","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-f1775530-d5ca-4de3-bddb-78fde6895e53","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-bdf17159-6713-4949-bd2f-9d171a236f7a","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-1c602035-841c-4ac0-8bf9-acadc0212916","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-4fd3c3eb-71c6-46a2-a46f-0c95e851e146","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-53354cf3-5d25-42e7-9942-3676046a35f7","keyframes":{"opacity":[0,1]},"delay":100,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-1a369712-b8d5-49d5-8ea9-cebce19cf24b","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-324035e9-95ff-4e3d-8ae8-79a825556ef9","keyframes":{"opacity":[0,1]},"delay":200,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-52cd497d-6b61-4369-9888-bf8d51eefa82","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-777c6250-2053-45f7-b9c7-4c6279b0e0c8","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-820fd049-26f6-44b9-9129-8592c5ea572c","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-bf18ee77-a199-458b-8879-e0ccb0739d65","keyframes":{"opacity":[0,1]},"delay":100,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-4d44b9a3-ae64-4f68-b2c1-1955e49a8e86","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-64b4c51f-585b-4674-a0f6-fc3dd448c9b4","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-3b03a6c8-1026-4c51-b212-5f76b49976d3","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-70603ec3-f25d-4cff-b30d-e4b0cd59490c","keyframes":{"opacity":[0,1]},"delay":200,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-99e3b404-c887-487c-bbec-3986e03c9523","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-012c2341-6530-4dff-b968-3a441daebcaa","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-dd78f817-8f0d-4183-b8ae-e22beba6b816","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-0121ffa2-9887-41e9-815e-5389d0ca68a2","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-4de44653-fd57-48d8-a439-4abbb616534e","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-f50737a4-3661-4eec-b97d-8612ff83f2a5","keyframes":{"opacity":[0,1]},"delay":2000,"duration":1000,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-56278f35-8bd8-4409-8b2f-7aebc3283a81","keyframes":{"opacity":[0,1]},"delay":2000,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-895e38e2-2433-46cd-baff-994e2d2b3fe9","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-93831e75-9c1f-47f9-bac4-d743c28767b0","keyframes":{"opacity":[0,1]},"delay":2400,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-cc25bfe2-f0c9-4de7-94ce-a748a4224cf6","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-fa966248-54d2-46c4-9737-ac4df74e640b","keyframes":{"opacity":[0,1]},"delay":2600,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-3b89a962-5ff4-4cc5-b2b4-16f1f370f8df","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-ba7ec457-7420-4817-8826-323ac0ec6f5e","keyframes":{"opacity":[0,1]},"delay":2200,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-95ee4335-f25f-48d0-82e3-6d136d2a151b","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-6ef5062e-1c8e-458e-9d1d-a4b7c1ebbaf7 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(-4.665192251743079%, 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