# Clip path triangle create with custom component **URL:** \ **Category:** Elements API\ **Created:** [August 4, 2024, 8:24pm UTC](https://forums.realmacsoftware.com/t/clip-path-triangle-create-with-custom-component/44092 "2024-08-04T20:24:06Z")\ **Posts on this page:** 10\ **Page:** 1
**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\ **Post date:** [August 4, 2024, 8:24pm UTC](https://forums.realmacsoftware.com/t/clip-path-triangle-create-with-custom-component/44092/1 "2024-08-04T20:24:06Z")
updated Not sure this was intended but I have used the text field property to write the class name in the css, this means for this example I have written the same class as I duplicated the html component example included, again preview in safari does not show image, does in Elements so revert background colour so I could check shape [https://www.dropbox.com/scl/fo/fyr3bitg1b1rx3l1ld6s5/AGjtb6PDIKCalLj5Fa8YTtU?rlkey=x0inpsf4tvkq9vpkq2gniyqal&st=7zhb3t3i&dl=0](https://www.dropbox.com/scl/fo/fyr3bitg1b1rx3l1ld6s5/AGjtb6PDIKCalLj5Fa8YTtU?rlkey=x0inpsf4tvkq9vpkq2gniyqal&st=7zhb3t3i&dl=0) ---
**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\ **Post date:** [August 4, 2024, 10:26pm UTC](https://forums.realmacsoftware.com/t/clip-path-triangle-create-with-custom-component/44092/2 "2024-08-04T22:26:55Z")
Image resource path is fixed in the next beta, expect it early next week! ๐Ÿ‘‡ ![CleanShot 2024-08-04 at 11 .28.37@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/c/f/cf88c72a3afa27d735e84330ce15f31eb22f5e00.jpeg) ---
**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\ **Post date:** [August 4, 2024, 10:43pm UTC](https://forums.realmacsoftware.com/t/clip-path-triangle-create-with-custom-component/44092/3 "2024-08-04T22:43:15Z")
Looking forward to it ---
**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\ **Post date:** [August 5, 2024, 12:58pm UTC](https://forums.realmacsoftware.com/t/clip-path-triangle-create-with-custom-component/44092/4 "2024-08-05T12:58:59Z")
placed 5 custom component triangles, by just duplicating the component in a page, needs some layout adjusting for the text etc when changing to mobile and when wide, but changes in Elements, images will work later this week when next beta is released, I have created circles/ovals and arrows wow I really like Elements ````auto https://www.dropbox.com/scl/fo/zhmjtif89qvpp5rphszn4/AH32dRDrSlxqTAWdejgBadA?rlkey=7bgqwoql7zsflscmwp3z7ww27&st=04fbn0pr&dl=0``` ```` ---
**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\ **Post date:** [August 5, 2024, 1:20pm UTC](https://forums.realmacsoftware.com/t/clip-path-triangle-create-with-custom-component/44092/5 "2024-08-05T13:20:13Z")
trying wetransfer ```auto https://wetransfer.com/downloads/93313d9b241e9b016db82bf810b8bfbe20240805131808/11d11a ``` ---
**Author:** ![logrunner](https://avatars.discourse-cdn.com/v4/letter/l/59ef9b/32.png) [@logrunner](https://forums.realmacsoftware.com/u/logrunner)\ **Post date:** [August 5, 2024, 1:37pm UTC](https://forums.realmacsoftware.com/t/clip-path-triangle-create-with-custom-component/44092/6 "2024-08-05T13:37:46Z")
Thatโ€™s really impressive! ๐Ÿ‘ ---
**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\ **Post date:** [August 5, 2024, 1:58pm UTC](https://forums.realmacsoftware.com/t/clip-path-triangle-create-with-custom-component/44092/7 "2024-08-05T13:58:46Z")
still needs some work on the component ---
**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\ **Post date:** [August 6, 2024, 11:31am UTC](https://forums.realmacsoftware.com/t/clip-path-triangle-create-with-custom-component/44092/8 "2024-08-06T11:31:29Z")
added square as well as triangle more responsive now with position control with wetransfer are you able to save when you download? I canโ€™t save not sure what happens when someone else copies either one or both of the html components to their copy of Elements `https://we.tl/t-QBJNXH9hzs` ---
**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\ **Post date:** [August 6, 2024, 6:03pm UTC](https://forums.realmacsoftware.com/t/clip-path-triangle-create-with-custom-component/44092/9 "2024-08-06T18:03:09Z")
updates work great from my changes, I found it difficult to create the top banner in my previous upload, this is only Elements, it was easier before update, gave up but my components work, I think, even in the mobile menu ```auto https://we.tl/t-AbYYN2DAQP ``` ---
**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\ **Post date:** [August 6, 2024, 11:18pm UTC](https://forums.realmacsoftware.com/t/clip-path-triangle-create-with-custom-component/44092/10 "2024-08-06T23:18:01Z")
Looking good - works here ๐Ÿ‘ ![CleanShot 2024-08-07 at 12 .17.43@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/b/2/b27abda0c4d5cce67ddc279ece2b38432250c9f1.jpeg)