[16] I Discovered Clip-Paths

[lina_trinch]

🙝live previews here!🙟





Heart w/ Heart Links
<center> <div style="height: 570px;width: 620px;"> <!----HEART----> <div style="height: 300px;width: 330px;text-align:center;overflow:hidden;padding-top: 140px;"> <div style="background: url(URL), #84d9f5;background-position:center;background-size:cover;width: 150px;height:150px;overflow: hidden; clip-path: polygon(0% 45%, 10% 100%, 10% 100%, 25% 95%);position:relative; bottom: -9px;left: 4px"></div> <div style="background: url(URL), #68bdd9;background-position:center;background-size:cover;width: 150px;height:150px;overflow: hidden; clip-path: polygon(2% 48%, 10% 10%, 50% 0%, 25% 25%);position:relative; bottom: 148px;"></div> <div style="background: url(URL), #c4eaf5;background-position:center;background-size:cover;width: 150px;height:150px;overflow: hidden; clip-path: polygon(0% 50%, 50% 0%, 50% 0%, 25% 100%);position:relative; bottom: 301px;left: 7px"></div> <div style="background: url(URL), #3098ba;background-position:center;background-size:cover;width: 150px;height:150px;overflow: hidden; clip-path: polygon(50% 0%, 25% 100%, 25% 100%, 100% 75%);position:relative; bottom: 451px;left: 11px"></div> <div style="background: url(URL), #30c3f0;background-position:center;background-size:cover;width: 150px;height:150px;overflow: hidden; clip-path: polygon(50% 0%, 80% 15%, 100% 45%, 100% 75%);position:relative; bottom: 601px;left: 15px"></div> <div style="background: url(URL), #1985a6;background-position:center;background-size:cover;width: 150px;height:150px;overflow: hidden; clip-path: polygon(50% 0%, 20% 15%, 00% 45%, 00% 75%);position:relative; bottom: 751px;left: 168px"></div> <div style="background: url(URL), #63b9d4;background-position:center;background-size:cover;width: 150px;height:150px;overflow: hidden; clip-path: polygon(50% 0%, 75% 100%, 75% 100%, 0% 75%);position:relative; bottom: 901px;left: 172px"></div> <div style="background: url(URL), #538494;background-position:center;background-size:cover;width: 150px;height:150px;overflow: hidden; clip-path: polygon(100% 50%, 50% 0%, 50% 0%, 75% 100%);position:relative; bottom: 1051px;left: 176px"></div> <div style="background: url(URL), #a0e4fa;background-position:center;background-size:cover;width: 150px;height:150px;overflow: hidden; clip-path: polygon(98% 48%, 90% 10%, 50% 0%, 75% 25%);position:relative; bottom: 1198px;left: 184px"></div> <div style="background: url(URL), #b9e2f0;background-position:center;background-size:cover;width: 150px;height:150px;overflow: hidden; clip-path: polygon(100% 45%, 90% 100%, 90% 100%, 75% 95%);position:relative; bottom: 1340px;left: 179px"></div> <div style="background: url(URL), #00beff;background-position:center;background-size:cover;width: 150px;height:150px;overflow: hidden; clip-path: polygon(0% 5%, 15% 0%, 15% 0%, 18% 30%);position:relative; bottom: 1345px;left: 21px"></div> <div style="background: url(URL), #046b8f;background-position:center;background-size:cover;width: 150px;height:150px;overflow: hidden; clip-path: polygon(5% 0%, 8% 30%, 40% 55%, 83% 46%);position:relative; bottom: 1491px;left: 41px"></div> <div style="background: url(URL), #2bacd9;background-position:center;background-size:cover;width: 150px;height:150px;overflow: hidden; clip-path: polygon(2% 34%, 2% 34%, 80% 80%, 80% 8%);position:relative; bottom: 1697px;left: 46px"></div> <div style="background: url(URL), #2e85a3;background-position:center;background-size:cover;width: 150px;height:150px;overflow: hidden; clip-path: polygon(97% 35%, 97% 35%, 20% 80%, 20% 8%);position:relative; bottom: 1847px;left: 140px"></div> <div style="background: url(URL), #4695b0;background-position:center;background-size:cover;width: 150px;height:150px;overflow: hidden; clip-path: polygon(95% 0%, 92% 30%, 60% 55%, 19% 45%);position:relative; bottom: 1940px;left: 144px"></div> <div style="background: url(URL), #a9c1c9;background-position:center;background-size:cover;width: 150px;height:150px;overflow: hidden; clip-path: polygon(100% 5%, 85% 0%, 85% 0%, 82% 30%);position:relative; bottom: 2093px;left: 163px"></div> <div style="background: url(URL), #77bcd4;background-position:center;background-size:cover;width: 150px;height:150px;overflow: hidden; clip-path: polygon(100% 0%, 60% 9%, 60% 9%, 100% 40%);position:relative; bottom: 2168px;left: 16px"></div> <div style="background: url(URL), #1d95bf;background-position:center;background-size:cover;width: 150px;height:150px;overflow: hidden; clip-path: polygon(0% 0%, 40% 9%, 40% 9%, 0% 40%);position:relative; bottom: 2318px;left: 170px"></div> </div> <!------LINKS------> <!---RED---> <div style="background: url(URL), #ed5353;background-position:center;background-size:cover;width: 120px;height:120px;overflow: hidden; clip-path: polygon(25% 0%, 50% 25%, 75% 0%, 100% 30%, 50% 100%, 0% 30%);position:relative; bottom: 350px;left: -230px"><div style="margin-top: 40px;"> <a href="URL" style="color: #fff;text-decoration:none;font-variant:small-caps;font-size: 23px;font-family: monospace;">link</a> </div></div> <!---ORANGE---> <div style="background: url(URL), #fac96e;background-position:center;background-size:cover;width: 120px;height:120px;overflow: hidden; clip-path: polygon(25% 0%, 50% 25%, 75% 0%, 100% 30%, 50% 100%, 0% 30%);position:relative; bottom: 470px;left: 230px"><div style="margin-top: 40px;"> <a href="URL" style="color: #fff;text-decoration:none;font-variant:small-caps;font-size: 23px;font-family: monospace;">link</a> </div></div> <!---YELLOW---> <div style="background: url(URL), #fafa70;background-position:center;background-size:cover;width: 120px;height:120px;overflow: hidden; clip-path: polygon(25% 0%, 50% 25%, 75% 0%, 100% 30%, 50% 100%, 0% 30%);position:relative; bottom: 680px;left: -70px"><div style="margin-top: 40px;"> <a href="URL" style="color: #fff;text-decoration:none;font-variant:small-caps;font-size: 23px;font-family: monospace;">link</a> </div></div> <!---GREEN---> <div style="background: url(URL), #73ff7a;background-position:center;background-size:cover;width: 120px;height:120px;overflow: hidden; clip-path: polygon(25% 0%, 50% 25%, 75% 0%, 100% 30%, 50% 100%, 0% 30%);position:relative; bottom: 799px;left: 70px"><div style="margin-top: 40px;"> <a href="URL" style="color: #fff;text-decoration:none;font-variant:small-caps;font-size: 23px;font-family: monospace;">link</a> </div></div> <!---TEAL---> <div style="background: url(URL), #87e8c9;background-position:center;background-size:cover;width: 120px;height:120px;overflow: hidden; clip-path: polygon(25% 0%, 50% 25%, 75% 0%, 100% 30%, 50% 100%, 0% 30%);position:relative; bottom: 680px;left: -250px"><div style="margin-top: 40px;"> <a href="URL" style="color: #fff;text-decoration:none;font-variant:small-caps;font-size: 23px;font-family: monospace;">link</a> </div></div> <!---CYAN---> <div style="background: url(URL), #8ae3f2;background-position:center;background-size:cover;width: 120px;height:120px;overflow: hidden; clip-path: polygon(25% 0%, 50% 25%, 75% 0%, 100% 30%, 50% 100%, 0% 30%);position:relative; bottom: 650px;left: -160px"><div style="margin-top: 40px;"> <a href="URL" style="color: #fff;text-decoration:none;font-variant:small-caps;font-size: 23px;font-family: monospace;">link</a> </div></div> <!---BLUE---> <div style="background: url(URL), #7a8bfa;background-position:center;background-size:cover;width: 120px;height:120px;overflow: hidden; clip-path: polygon(25% 0%, 50% 25%, 75% 0%, 100% 30%, 50% 100%, 0% 30%);position:relative; bottom: 920px;left: 250px"><div style="margin-top: 40px;"> <a href="URL" style="color: #fff;text-decoration:none;font-variant:small-caps;font-size: 23px;font-family: monospace;">link</a> </div></div> <!---PURPLE---> <div style="background: url(URL), #c979f7;background-position:center;background-size:cover;width: 120px;height:120px;overflow: hidden; clip-path: polygon(25% 0%, 50% 25%, 75% 0%, 100% 30%, 50% 100%, 0% 30%);position:relative; bottom: 890px;left: 160px"><div style="margin-top: 40px;"> <a href="URL" style="color: #fff;text-decoration:none;font-variant:small-caps;font-size: 23px;font-family: monospace;">link</a> </div></div> <!---PINK---> <div style="background: url(URL), #fa87ec;background-position:center;background-size:cover;width: 120px;height:120px;overflow: hidden; clip-path: polygon(25% 0%, 50% 25%, 75% 0%, 100% 30%, 50% 100%, 0% 30%);position:relative; bottom:950px;left: 0px"><div style="margin-top: 40px;"> <a href="URL" style="color: #fff;text-decoration:none;font-variant:small-caps;font-size: 23px;font-family: monospace;">link</a> </div></div> </div> <!-----CREDIT-----> <br /><a href="https://killthecake.dreamwidth.org/" style="text-decoration:none;font-family:helvetica;font-variant:small-caps;font-size: 12px;color: #cccccc;">by killthecake</a>





Heart w/ Circle Links
<center> <div style="height: 570px;width: 620px;"> <!----HEART----> <div style="height: 300px;width: 330px;text-align:center;overflow:hidden;padding-top: 140px;"> <div style="background: url(URL), #84d9f5;background-position:center;background-size:cover;width: 150px;height:150px;overflow: hidden; clip-path: polygon(0% 45%, 10% 100%, 10% 100%, 25% 95%);position:relative; bottom: -9px;left: 4px"></div> <div style="background: url(URL), #68bdd9;background-position:center;background-size:cover;width: 150px;height:150px;overflow: hidden; clip-path: polygon(2% 48%, 10% 10%, 50% 0%, 25% 25%);position:relative; bottom: 148px;"></div> <div style="background: url(URL), #c4eaf5;background-position:center;background-size:cover;width: 150px;height:150px;overflow: hidden; clip-path: polygon(0% 50%, 50% 0%, 50% 0%, 25% 100%);position:relative; bottom: 301px;left: 7px"></div> <div style="background: url(URL), #3098ba;background-position:center;background-size:cover;width: 150px;height:150px;overflow: hidden; clip-path: polygon(50% 0%, 25% 100%, 25% 100%, 100% 75%);position:relative; bottom: 451px;left: 11px"></div> <div style="background: url(URL), #30c3f0;background-position:center;background-size:cover;width: 150px;height:150px;overflow: hidden; clip-path: polygon(50% 0%, 80% 15%, 100% 45%, 100% 75%);position:relative; bottom: 601px;left: 15px"></div> <div style="background: url(URL), #1985a6;background-position:center;background-size:cover;width: 150px;height:150px;overflow: hidden; clip-path: polygon(50% 0%, 20% 15%, 00% 45%, 00% 75%);position:relative; bottom: 751px;left: 168px"></div> <div style="background: url(URL), #63b9d4;background-position:center;background-size:cover;width: 150px;height:150px;overflow: hidden; clip-path: polygon(50% 0%, 75% 100%, 75% 100%, 0% 75%);position:relative; bottom: 901px;left: 172px"></div> <div style="background: url(URL), #538494;background-position:center;background-size:cover;width: 150px;height:150px;overflow: hidden; clip-path: polygon(100% 50%, 50% 0%, 50% 0%, 75% 100%);position:relative; bottom: 1051px;left: 176px"></div> <div style="background: url(URL), #a0e4fa;background-position:center;background-size:cover;width: 150px;height:150px;overflow: hidden; clip-path: polygon(98% 48%, 90% 10%, 50% 0%, 75% 25%);position:relative; bottom: 1198px;left: 184px"></div> <div style="background: url(URL), #b9e2f0;background-position:center;background-size:cover;width: 150px;height:150px;overflow: hidden; clip-path: polygon(100% 45%, 90% 100%, 90% 100%, 75% 95%);position:relative; bottom: 1340px;left: 179px"></div> <div style="background: url(URL), #00beff;background-position:center;background-size:cover;width: 150px;height:150px;overflow: hidden; clip-path: polygon(0% 5%, 15% 0%, 15% 0%, 18% 30%);position:relative; bottom: 1345px;left: 21px"></div> <div style="background: url(URL), #046b8f;background-position:center;background-size:cover;width: 150px;height:150px;overflow: hidden; clip-path: polygon(5% 0%, 8% 30%, 40% 55%, 83% 46%);position:relative; bottom: 1491px;left: 41px"></div> <div style="background: url(URL), #2bacd9;background-position:center;background-size:cover;width: 150px;height:150px;overflow: hidden; clip-path: polygon(2% 34%, 2% 34%, 80% 80%, 80% 8%);position:relative; bottom: 1697px;left: 46px"></div> <div style="background: url(URL), #2e85a3;background-position:center;background-size:cover;width: 150px;height:150px;overflow: hidden; clip-path: polygon(97% 35%, 97% 35%, 20% 80%, 20% 8%);position:relative; bottom: 1847px;left: 140px"></div> <div style="background: url(URL), #4695b0;background-position:center;background-size:cover;width: 150px;height:150px;overflow: hidden; clip-path: polygon(95% 0%, 92% 30%, 60% 55%, 19% 45%);position:relative; bottom: 1940px;left: 144px"></div> <div style="background: url(URL), #a9c1c9;background-position:center;background-size:cover;width: 150px;height:150px;overflow: hidden; clip-path: polygon(100% 5%, 85% 0%, 85% 0%, 82% 30%);position:relative; bottom: 2093px;left: 163px"></div> <div style="background: url(URL), #77bcd4;background-position:center;background-size:cover;width: 150px;height:150px;overflow: hidden; clip-path: polygon(100% 0%, 60% 9%, 60% 9%, 100% 40%);position:relative; bottom: 2168px;left: 16px"></div> <div style="background: url(URL), #1d95bf;background-position:center;background-size:cover;width: 150px;height:150px;overflow: hidden; clip-path: polygon(0% 0%, 40% 9%, 40% 9%, 0% 40%);position:relative; bottom: 2318px;left: 170px"></div> </div> <!------LINKS------> <!---RED---> <div style="background: url(URL), #ed5353;background-position:center;background-size:cover;width: 120px;height:120px;overflow: hidden; clip-path: circle(35%);position:relative; bottom: 350px;left: -230px"><div style="margin-top: 43px;"> <a href="URL" style="color: #fff;text-decoration:none;font-variant:small-caps;font-size: 23px;font-family: monospace;">link</a> </div></div> <!---ORANGE---> <div style="background: url(URL), #fac96e;background-position:center;background-size:cover;width: 120px;height:120px;overflow: hidden; clip-path: circle(35%);position:relative; bottom: 470px;left: 230px"><div style="margin-top: 43px;"> <a href="URL" style="color: #fff;text-decoration:none;font-variant:small-caps;font-size: 23px;font-family: monospace;">link</a> </div></div> <!---YELLOW---> <div style="background: url(URL), #fafa70;background-position:center;background-size:cover;width: 120px;height:120px;overflow: hidden; clip-path: circle(35%);position:relative; bottom: 680px;left: -70px"><div style="margin-top: 43px;"> <a href="URL" style="color: #fff;text-decoration:none;font-variant:small-caps;font-size: 23px;font-family: monospace;">link</a> </div></div> <!---GREEN---> <div style="background: url(URL), #73ff7a;background-position:center;background-size:cover;width: 120px;height:120px;overflow: hidden; clip-path: circle(35%);position:relative; bottom: 799px;left: 70px"><div style="margin-top: 43px;"> <a href="URL" style="color: #fff;text-decoration:none;font-variant:small-caps;font-size: 23px;font-family: monospace;">link</a> </div></div> <!---TEAL---> <div style="background: url(URL), #87e8c9;background-position:center;background-size:cover;width: 120px;height:120px;overflow: hidden; clip-path: circle(35%);position:relative; bottom: 680px;left: -250px"><div style="margin-top: 43px;"> <a href="URL" style="color: #fff;text-decoration:none;font-variant:small-caps;font-size: 23px;font-family: monospace;">link</a> </div></div> <!---CYAN---> <div style="background: url(URL), #8ae3f2;background-position:center;background-size:cover;width: 120px;height:120px;overflow: hidden; clip-path: circle(35%);position:relative; bottom: 650px;left: -160px"><div style="margin-top: 43px;"> <a href="URL" style="color: #fff;text-decoration:none;font-variant:small-caps;font-size: 23px;font-family: monospace;">link</a> </div></div> <!---BLUE---> <div style="background: url(URL), #7a8bfa;background-position:center;background-size:cover;width: 120px;height:120px;overflow: hidden; clip-path: circle(35%);position:relative; bottom: 920px;left: 250px"><div style="margin-top: 43px;"> <a href="URL" style="color: #fff;text-decoration:none;font-variant:small-caps;font-size: 23px;font-family: monospace;">link</a> </div></div> <!---PURPLE---> <div style="background: url(URL), #c979f7;background-position:center;background-size:cover;width: 120px;height:120px;overflow: hidden; clip-path: circle(35%);position:relative; bottom: 890px;left: 160px"><div style="margin-top: 43px;"> <a href="URL" style="color: #fff;text-decoration:none;font-variant:small-caps;font-size: 23px;font-family: monospace;">link</a> </div></div> <!---PINK---> <div style="background: url(URL), #fa87ec;background-position:center;background-size:cover;width: 120px;height:120px;overflow: hidden; clip-path: circle(35%);position:relative; bottom:950px;left: 0px"><div style="margin-top: 43px;"> <a href="URL" style="color: #fff;text-decoration:none;font-variant:small-caps;font-size: 23px;font-family: monospace;">link</a> </div></div> </div> <!-----CREDIT-----> <br /><a href="https://killthecake.dreamwidth.org/" style="text-decoration:none;font-family:helvetica;font-variant:small-caps;font-size: 12px;color: #cccccc;">by killthecake</a>





Small Triangle Banner w/ No Links
<center> <!----SMALL BANNER----> <div style="height: 50px;width: 440px;text-align:center;"> <div style="background: url(URL), #ffc5c5;background-position:center;background-size:cover;width: 100px;height:100px;overflow: hidden; clip-path: polygon(50% 25%, 75% 25%, 50% 75%, 25% 50%);position:relative; bottom: 25px;left: -24px"></div> <div style="background: url(URL), #ffb1b1;background-position:center;background-size:cover;width: 100px;height:100px;overflow: hidden; clip-path: polygon(25% 75%, 50% 25%, 75% 75%, 50% 75%);position:relative; bottom: 125px;left: 6px"></div> <div style="background: url(URL), #ffabab;background-position:center;background-size:cover;width: 100px;height:100px;overflow: hidden; clip-path: polygon(25% 25%, 75% 25%, 50% 75%, 25% 25%);position:relative; bottom: 225px;left: 36px"></div> <div style="background: url(URL), #ff9b9b;background-position:center;background-size:cover;width: 100px;height:100px;overflow: hidden; clip-path: polygon(25% 75%, 50% 25%, 75% 75%, 50% 75%);position:relative; bottom: 325px;left: 66px"></div> <div style="background: url(URL), #ff8f8f;background-position:center;background-size:cover;width: 100px;height:100px;overflow: hidden; clip-path: polygon(25% 25%, 75% 25%, 50% 75%, 25% 25%);position:relative; bottom: 425px;left: 96px"></div> <div style="background: url(URL), #ff8585;background-position:center;background-size:cover;width: 100px;height:100px;overflow: hidden; clip-path: polygon(25% 75%, 50% 25%, 75% 75%, 50% 75%);position:relative; bottom: 525px;left: 126px"></div> <div style="background: url(URL), #ff7777;background-position:center;background-size:cover;width: 100px;height:100px;overflow: hidden; clip-path: polygon(25% 25%, 75% 25%, 50% 75%, 25% 25%);position:relative; bottom: 625px;left: 156px"></div> <div style="background: url(URL), #ff7777;background-position:center;background-size:cover;width: 100px;height:100px;overflow: hidden; clip-path: polygon(25% 75%, 50% 25%, 75% 75%, 50% 75%);position:relative; bottom: 725px;left: 186px"></div> <div style="background: url(URL), #ff8585;background-position:center;background-size:cover;width: 100px;height:100px;overflow: hidden; clip-path: polygon(25% 25%, 75% 25%, 50% 75%, 25% 25%);position:relative; bottom: 825px;left: 216px"></div> <div style="background: url(URL), #ff8f8f;background-position:center;background-size:cover;width: 100px;height:100px;overflow: hidden; clip-path: polygon(25% 75%, 50% 25%, 75% 75%, 50% 75%);position:relative; bottom: 925px;left: 246px"></div> <div style="background: url(URL), #ff9b9b;background-position:center;background-size:cover;width: 100px;height:100px;overflow: hidden; clip-path: polygon(25% 25%, 75% 25%, 50% 75%, 25% 25%);position:relative; bottom: 1025px;left: 276px"></div> <div style="background: url(URL), #ffabab;background-position:center;background-size:cover;width: 100px;height:100px;overflow: hidden; clip-path: polygon(25% 75%, 50% 25%, 75% 75%, 50% 75%);position:relative; bottom: 1125px;left: 306px"></div> <div style="background: url(URL), #ffb1b1;background-position:center;background-size:cover;width: 100px;height:100px;overflow: hidden; clip-path: polygon(25% 25%, 75% 25%, 50% 75%, 25% 25%);position:relative; bottom: 1225px;left: 336px"></div> <div style="background: url(URL), #ffc5c5;background-position:center;background-size:cover;width: 100px;height:100px;overflow: hidden; clip-path: polygon(50% 75%, 25% 75%, 50% 25%, 75% 50%);position:relative; bottom: 1325px;left: 366px"></div> </div> <!-----CREDIT-----> <br /><a href="https://killthecake.dreamwidth.org/" style="text-decoration:none;font-family:helvetica;font-variant:small-caps;font-size: 12px;color: #cccccc;">by killthecake</a>





Large Triangle Banner w/ Links
<center> <!----BIG BANNER----> <div style="height: 100px;width: 595px;text-align:center;"> <div style="background: url(URL),#fedbff;background-position:center;background-size:cover;width: 100px;height:100px;overflow: hidden; clip-path: polygon(50% 0%, 100% 0%, 50% 100%, 0% 50%);"></div> <div style="background: url(URL),#fdc3ff;background-position:center;background-size:cover;width: 100px;height:100px;overflow: hidden; clip-path: polygon(0% 100%, 50% 0%, 100% 100%, 50% 100%);position:relative; bottom: 100px;left: 55px"> <div style="margin-top: 55px;"> <a href="URL" style="color: #fff;text-decoration:none;font-variant:small-caps;font-size: 23px;font-family: monospace;">link</a> </div></div> <div style="background: url(URL),#fcb8ff;background-position:center;background-size:cover;width: 100px;height:100px;overflow: hidden; clip-path: polygon(0% 0%, 100% 0%, 50% 100%, 25% 50%);position:relative; bottom: 200px;left: 110px"><div style="margin-top: 10px;"> <a href="URL" style="color: #fff;text-decoration:none;font-variant:small-caps;font-size: 23px;font-family: monospace;">link</a> </div></div> <div style="background: url(URL),#fcb1ff;background-position:center;background-size:cover;width: 100px;height:100px;overflow: hidden; clip-path: polygon(0% 100%, 50% 0%, 100% 100%, 50% 100%);position:relative; bottom: 300px;left: 165px"><div style="margin-top: 55px;"> <a href="URL" style="color: #fff;text-decoration:none;font-variant:small-caps;font-size: 23px;font-family: monospace;">link</a> </div></div> <div style="background: url(URL),#fba2ff;background-position:center;background-size:cover;width: 100px;height:100px;overflow: hidden; clip-path: polygon(0% 0%, 100% 0%, 50% 100%, 25% 50%);position:relative; bottom: 400px;left: 220px"><div style="margin-top: 10px;"> <a href="URL" style="color: #fff;text-decoration:none;font-variant:small-caps;font-size: 23px;font-family: monospace;">link</a> </div></div> <div style="background: url(URL),#fa93ff;background-position:center;background-size:cover;width: 100px;height:100px;overflow: hidden; clip-path: polygon(0% 100%, 50% 0%, 100% 100%, 50% 100%);position:relative; bottom: 500px;left: 275px"><div style="margin-top: 55px;"> <a href="URL" style="color: #fff;text-decoration:none;font-variant:small-caps;font-size: 23px;font-family: monospace;">link</a> </div></div> <div style="background: url(URL),#f988ff;background-position:center;background-size:cover;width: 100px;height:100px;overflow: hidden; clip-path: polygon(0% 0%, 100% 0%, 50% 100%, 25% 50%);position:relative; bottom: 600px;left: 330px"><div style="margin-top: 10px;"> <a href="URL" style="color: #fff;text-decoration:none;font-variant:small-caps;font-size: 23px;font-family: monospace;">link</a> </div></div> <div style="background: url(URL),#f872ff;background-position:center;background-size:cover;width: 100px;height:100px;overflow: hidden; clip-path: polygon(0% 100%, 50% 0%, 100% 100%, 50% 100%);position:relative; bottom: 700px;left: 385px"><div style="margin-top: 55px;"> <a href="URL" style="color: #fff;text-decoration:none;font-variant:small-caps;font-size: 23px;font-family: monospace;">link</a> </div></div> <div style="background: url(URL),#f75eff;background-position:center;background-size:cover;width: 100px;height:100px;overflow: hidden; clip-path: polygon(0% 0%, 100% 0%, 50% 100%, 25% 50%);position:relative; bottom: 800px;left: 440px"><div style="margin-top: 10px;"> <a href="URL" style="color: #fff;text-decoration:none;font-variant:small-caps;font-size: 23px;font-family: monospace;">link</a> </div></div> <div style="background: url(URL),#f651ff;background-position:center;background-size:cover;width: 100px;height:100px;overflow: hidden; clip-path: polygon(50% 100%, 0% 100%, 50% 0%, 100% 50%);position:relative; bottom: 900px;left: 495px"></div> </div> <!-----CREDIT-----> <br /><a href="https://killthecake.dreamwidth.org/" style="text-decoration:none;font-family:helvetica;font-variant:small-caps;font-size: 12px;color: #cccccc;">by killthecake</a>





12 Link Arrow Banner
<center> <!----ARROW BANNER----> <div style="width: 635px; height: 100px; border: px solid black;"> <div style="background: url(URL),#fedbff;background-position:center;background-size:cover;width: 635px;height:100px;overflow: hidden; clip-path: polygon(13% 0%, 10% 47%, 87% 47%, 90% 0%, 100% 0%, 95% 50%, 100% 100%, 90% 100%, 87% 52%, 10% 52%, 13% 100%, 0% 50%);"></div> <div style="background: url(URL),#fdc3ff;background-position:center;background-size:cover;width: 96px;height:100px;overflow: hidden; clip-path: polygon(20% 0%, 100% 0%, 80% 45%, 0% 45%);position:relative;top: -100px;left: -202px;"><div style="margin-top:5px;margin-left: -9px"> <a href="URL" style="color: #fff;text-decoration:none;font-variant:small-caps;font-size: 23px;font-family: monospace;">link</a> </div></div> <div style="background: url(URL),#fdc3ff;background-position:center;background-size:cover;width: 96px;height:100px;overflow: hidden; clip-path: polygon(20% 0%, 100% 0%, 80% 45%, 0% 45%);position:relative;top: -200px;left: -121px;"><div style="margin-top:5px;margin-left: -3px"> <a href="URL" style="color: #fff;text-decoration:none;font-variant:small-caps;font-size: 23px;font-family: monospace;">link</a> </div></div> <div style="background: url(URL),#fdc3ff;background-position:center;background-size:cover;width: 96px;height:100px;overflow: hidden; clip-path: polygon(20% 0%, 100% 0%, 80% 45%, 0% 45%);position:relative;top: -300px;left: -40px;"><div style="margin-top:5px;margin-left: -3px"> <a href="URL" style="color: #fff;text-decoration:none;font-variant:small-caps;font-size: 23px;font-family: monospace;">link</a> </div></div> <div style="background: url(URL),#fdc3ff;background-position:center;background-size:cover;width: 96px;height:100px;overflow: hidden; clip-path: polygon(20% 0%, 100% 0%, 80% 45%, 0% 45%);position:relative;top: -400px;left: 41px;"><div style="margin-top:5px;margin-left: -3px"> <a href="URL" style="color: #fff;text-decoration:none;font-variant:small-caps;font-size: 23px;font-family: monospace;">link</a> </div></div> <div style="background: url(URL),#fdc3ff;background-position:center;background-size:cover;width: 96px;height:100px;overflow: hidden; clip-path: polygon(20% 0%, 100% 0%, 80% 45%, 0% 45%);position:relative;top: -500px;left: 122px;"><div style="margin-top:5px;margin-left: -3px"> <a href="URL" style="color: #fff;text-decoration:none;font-variant:small-caps;font-size: 23px;font-family: monospace;">link</a> </div></div> <div style="background: url(URL),#fdc3ff;background-position:center;background-size:cover;width: 96px;height:100px;overflow: hidden; clip-path: polygon(20% 0%, 100% 0%, 80% 45%, 0% 45%);position:relative;top: -600px;left: 203px;"><div style="margin-top:5px;margin-left: 5px"> <a href="URL" style="color: #fff;text-decoration:none;font-variant:small-caps;font-size: 23px;font-family: monospace;">link</a> </div></div> <div style="background: url(URL),#fdc3ff;background-position:center;background-size:cover;width: 96px;height:100px;overflow: hidden; clip-path: polygon(0% 0%, 80% 0%, 100% 45%, 20% 45%);position:relative;top: -645px;left: -202px;"><div style="margin-top:5px;margin-left: -9px"> <a href="URL" style="color: #fff;text-decoration:none;font-variant:small-caps;font-size: 23px;font-family: monospace;">link</a> </div></div> <div style="background: url(URL),#fdc3ff;background-position:center;background-size:cover;width: 96px;height:100px;overflow: hidden; clip-path: polygon(0% 0%, 80% 0%, 100% 45%, 20% 45%);position:relative;top: -745px;left: -121px;"><div style="margin-top:5px;margin-left: -3px"> <a href="URL" style="color: #fff;text-decoration:none;font-variant:small-caps;font-size: 23px;font-family: monospace;">link</a> </div></div> <div style="background: url(URL),#fdc3ff;background-position:center;background-size:cover;width: 96px;height:100px;overflow: hidden; clip-path: polygon(0% 0%, 80% 0%, 100% 45%, 20% 45%);position:relative;top: -845px;left: -40px;"><div style="margin-top:5px;margin-left: -3px"> <a href="URL" style="color: #fff;text-decoration:none;font-variant:small-caps;font-size: 23px;font-family: monospace;">link</a> </div></div> <div style="background: url(URL),#fdc3ff;background-position:center;background-size:cover;width: 96px;height:100px;overflow: hidden; clip-path: polygon(0% 0%, 80% 0%, 100% 45%, 20% 45%);position:relative;top: -945px;left: 41px;"><div style="margin-top:5px;margin-left: -3px"> <a href="URL" style="color: #fff;text-decoration:none;font-variant:small-caps;font-size: 23px;font-family: monospace;">link</a> </div></div> <div style="background: url(URL),#fdc3ff;background-position:center;background-size:cover;width: 96px;height:100px;overflow: hidden; clip-path: polygon(0% 0%, 80% 0%, 100% 45%, 20% 45%);position:relative;top: -1045px;left: 122px;"><div style="margin-top:5px;margin-left: -3px"> <a href="URL" style="color: #fff;text-decoration:none;font-variant:small-caps;font-size: 23px;font-family: monospace;">link</a> </div></div> <div style="background: url(URL),#fdc3ff;background-position:center;background-size:cover;width: 96px;height:100px;overflow: hidden; clip-path: polygon(0% 0%, 80% 0%, 100% 45%, 20% 45%);position:relative;top: -1145px;left: 203px;"><div style="margin-top:5px;margin-left: 5px"> <a href="URL" style="color: #fff;text-decoration:none;font-variant:small-caps;font-size: 23px;font-family: monospace;">link</a> </div></div> </div> <!-----CREDIT-----> <br /><a href="https://killthecake.dreamwidth.org/" style="text-decoration:none;font-family:helvetica;font-variant:small-caps;font-size: 12px;color: #cccccc;">by killthecake</a>





6 Link Arrow Banner
<center> <!----BIG ARROW BANNER----> <div style="width: 635px; height: 100px; border: px solid black;"> <div style="background: url(URL),#fedbff;background-position:center;background-size:cover;width: 635px;height:100px;overflow: hidden; clip-path: polygon(13% 0%, 10% 47%, 87% 47%, 90% 0%, 100% 0%, 95% 50%, 100% 100%, 90% 100%, 87% 52%, 10% 52%, 13% 100%, 0% 50%);"></div> <div style="background: url(URL),#fdc3ff;background-position:center;background-size:cover;width: 96px;height:100px;overflow: hidden; clip-path: polygon(20% 0%, 100% 0%, 80% 50%, 100% 100%, 20% 100%, 0% 50%);position:relative;top: -100px;left: -203px;"><div style="margin-top:27px;margin-left: -10px"> <a href="URL" style="color: #fff;text-decoration:none;font-variant:small-caps;font-size: 28px;font-family: monospace;">link</a> </div></div> <div style="background: url(URL),#fdc3ff;background-position:center;background-size:cover;width: 96px;height:100px;overflow: hidden; clip-path: polygon(20% 0%, 100% 0%, 80% 50%, 100% 100%, 20% 100%, 0% 50%);position:relative;top: -200px;left: -122px;"><div style="margin-top:27px;margin-left: -10px"> <a href="URL" style="color: #fff;text-decoration:none;font-variant:small-caps;font-size: 28px;font-family: monospace;">link</a> </div></div> <div style="background: url(URL),#fdc3ff;background-position:center;background-size:cover;width: 96px;height:100px;overflow: hidden; clip-path: polygon(20% 0%, 100% 0%, 80% 50%, 100% 100%, 20% 100%, 0% 50%);position:relative;top: -300px;left: -41px;"><div style="margin-top:27px;margin-left: -10px"> <a href="URL" style="color: #fff;text-decoration:none;font-variant:small-caps;font-size: 28px;font-family: monospace;">link</a> </div></div> <div style="background: url(URL),#fdc3ff;background-position:center;background-size:cover;width: 96px;height:100px;overflow: hidden; clip-path: polygon(20% 0%, 100% 0%, 80% 50%, 100% 100%, 20% 100%, 0% 50%);position:relative;top: -400px;left: 40px;"><div style="margin-top:27px;margin-left: -10px"> <a href="URL" style="color: #fff;text-decoration:none;font-variant:small-caps;font-size: 28px;font-family: monospace;">link</a> </div></div> <div style="background: url(URL),#fdc3ff;background-position:center;background-size:cover;width: 96px;height:100px;overflow: hidden; clip-path: polygon(20% 0%, 100% 0%, 80% 50%, 100% 100%, 20% 100%, 0% 50%);position:relative;top: -500px;left: 121px;"><div style="margin-top:27px;margin-left: -10px"> <a href="URL" style="color: #fff;text-decoration:none;font-variant:small-caps;font-size: 28px;font-family: monospace;">link</a> </div></div> <div style="background: url(URL),#fdc3ff;background-position:center;background-size:cover;width: 96px;height:100px;overflow: hidden; clip-path: polygon(20% 0%, 100% 0%, 80% 50%, 100% 100%, 20% 100%, 0% 50%);position:relative;top: -600px;left: 202px;"><div style="margin-top:27px;margin-left: -10px"> <a href="URL" style="color: #fff;text-decoration:none;font-variant:small-caps;font-size: 28px;font-family: monospace;">link</a> </div></div> </div> <!-----CREDIT-----> <br /><a href="https://killthecake.dreamwidth.org/" style="text-decoration:none;font-family:helvetica;font-variant:small-caps;font-size: 12px;color: #cccccc;">by killthecake</a>



🙝live previews here!🙟

❖ Make sure Disable Auto-Formatting is checked when you copy/paste the code into your post. ❖ I highly recommend mixing and matching to play around with combinations. This and this are just a couple of the ways I played around with them. ❖ If you do use more than one, feel free to delete the credit part in all except one code. Or you can put the credit as a link in the code itself and then you can delete the extra bit. ❖ Don't use long words for your links. They'll clip off the pic and won't show up at all. I'm not sure how to get around that without adding a lot more code. ❖ Been having a little problem with the link text not centering on some journal layouts. You can fix this by finding the second instance of margin-top and margin-left in each link's code and playing around a tiny bit with the values (like 1 or 2 pixels). If you don't want to fool with it, though, toss it my way and I'll try to fix it for you. ❖ For the heart links, I know it would have made sense to add them in clockwise or something but, uh, that didn't happen. Instead, I colored each one and labeled them in the codes. I hope that helps. Also, the teal is on top and cyan is on the bottom. I know they look the same! I'm sorry! ❖ If you're color blind and can't figure out which circle is which color in the code, I made a little guide. Since I marked them in the code by color, I did the same with this. Ctrl+F & Replace: ❖ URL - Link urls and image urls. The image ones will always show up at the top of that section of code while the link ones will show up somewhere in the middle. I didn't realize I labeled them the same until just now, rip. Here's a tiny guide because I feel bad about it. Just replace the bold. Image URLs: background: url(URL), Link URLs: a href="URL" ❖ link - Link text. Keep it short. Might look better if you type it in lowercase as it'll turn into small-caps automatically.

Comments

[clover]

LOVE THESE. thank you :D

[lina_trinch]

thanks so much!! 8D

[gotthelegs]

Thank you for helping me create my aggressively glittery nav page

[lina_trinch]

omg i love it. It's so perfect for Angel Dust, too. Looks great.