[55] Diamond Navigation

[lina_trinch]

Link Link Link Link Link Credit

600x600 Code:
<div style="margin: auto; width: 580px; background: #fff; box-shadow: 0 0 6px #444; border: 10px solid #fff; font-family: Arial, Helvetica, sans-serif; font-size: 12px; border-radius: 5px;"> <div style="width: 100%; height: 290px; background: center/cover url('IMAGE_URL'), #fff; clip-path: polygon(0% 0%, 100% 0%, 50% 100%); -webkit-clip-path: polygon(0% 0%, 100% 0%, 50% 100%);"></div> <div style="width: 100%; height: 290px; background: center/cover url('BOTTOM_IMAGE_URL'), #000; clip-path: polygon(50% 0%, 100% 100%, 0% 100%); -webkit-clip-path: polygon(50% 0%, 100% 100%, 0% 100%); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; color: #fff; padding: 10px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;"> <a href="URL" style="color: #fff; text-decoration: none; margin: 5px 0; letter-spacing: 2px;"> Link </a> <a href="URL" style="color: #fff; text-decoration: none; margin: 5px 0; letter-spacing: 2px;"> Link </a> <a href="URL" style="color: #fff; text-decoration: none; margin: 5px 0; letter-spacing: 2px;"> Link </a> <a href="URL" style="color: #fff; text-decoration: none; margin: 5px 0; letter-spacing: 2px;"> Link </a> <a href="URL" style="color: #fff; text-decoration: none; margin: 5px 0; letter-spacing: 2px;"> Link </a> <a href="https://killthecake.dreamwidth.org/" style="color: #fff; text-decoration: none; margin: 5px 0; letter-spacing: 2px;"> Credit </a> </div> </div>

Link Link Link Link Link Credit

500x500 Code:
<div style="margin: auto; width: 480px; background: #fff; box-shadow: 0 0 6px #444; border: 10px solid #fff; font-family: Arial, Helvetica, sans-serif; font-size: 12px; border-radius: 5px;"> <div style="width: 100%; height: 240px; background: center/cover url('IMAGE_URL'), #fff; clip-path: polygon(0% 0%, 100% 0%, 50% 100%); -webkit-clip-path: polygon(0% 0%, 100% 0%, 50% 100%);"></div> <div style="width: 100%; height: 240px; background: center/cover url('BOTTOM_IMAGE_HERE'), #000; clip-path: polygon(50% 0%, 100% 100%, 0% 100%); -webkit-clip-path: polygon(50% 0%, 100% 100%, 0% 100%); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; color: #fff; padding: 10px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;"> <a href="URL" style="color: #fff; text-decoration: none; margin: 5px 0; letter-spacing: 2px;"> Link </a> <a href="URL" style="color: #fff; text-decoration: none; margin: 5px 0; letter-spacing: 2px;"> Link </a> <a href="URL" style="color: #fff; text-decoration: none; margin: 5px 0; letter-spacing: 2px;"> Link </a> <a href="URL" style="color: #fff; text-decoration: none; margin: 5px 0; letter-spacing: 2px;"> Link </a> <a href="URL" style="color: #fff; text-decoration: none; margin: 5px 0; letter-spacing: 2px;"> Link </a> <a href="https://killthecake.dreamwidth.org/" style="color: #fff; text-decoration: none; margin: 5px 0; letter-spacing: 2px;"> Credit </a> </div> </div>

❖ This is a code released early on the Patreon to my subscribers! So feel free to check out things over there if you want early codes or some exclusive content. ❖ The codes are the same aside from the size. ❖ Some creative tips! I've left space for you to add a background image to the top and bottom triangles, if you wanted to go that route, but you can leave them each with a solid color like in the examples above. For some added aesthetic, please remember that the white background and box shadows are totally optional. You can remove those to get a different look, or color the white background to make it like you have four custom triangles instead of two! If you want to do something fancy with it and aren't sure how, just reach out to me! I'll help you out as best I can. ❖ Make sure Disable Auto-Formatting is checked when you copy/paste the code into your post. ❖ I added a credit link in the link list itself. You've got my permission to remove that entirely or put it elsewhere. Ctrl+F & Replace: ❖ IMAGE_URL - Add a URL here for the background image on the top triangle. ❖ BOTTOM_IMAGE_URL - Add a URL here for the background image on the bottom triangle. Leave these as they are if you just want a solid color. ❖ URL - For link URLs. ❖ Link - Link text. #fff Border, main background, background color for top triangle, link text. #000 Background color for bottom triangle. #444 Box shadow.

Comments

[adore]

DO I SPY A HANSOL VERNON

[lina_trinch]

LMAO YOU DO. I've gotten into svt/kpop recently and it's easy to use their images for placeholders when they're suddenly everywhere, lol.

[thearchy]

this is great but also i am distracted easily by mr chwe dfkasjfksaf he has such a Face^TM

[lina_trinch]

completely fair and valid. man's got a fantastic Face^TM