This example demonstrated some artistic leave shaped links. Those leaves are threaded with leader-line.js for the special effect
Here is the example:
Example
<div class="container">
<div class="item"><a href="https://xyzcode.blogspot.com">I</a></div>
<div class="item"><a href="https://xyzcode.blogspot.com">II</a></div>
<div class="item">III</div>
<div class="item">IV</div>
<div class="item">V</div>
<div class="item">VI</div>
<div class="item">VII</div>
<div class="end"></div>
</div>
<style>
@font-face {
font-family: 'Dokdo';
font-style: normal;
font-weight: 400;
src: local('Dokdo Regular'), local('Dokdo-Regular'), url(https://fonts.gstatic.com/s/dokdo/v8/esDf315XNuCBLyLv6tI.ttf) format('truetype');
}
.container {
font-family: 'Dokdo', cursive;
background: #F3E5AB;
overflow-x: hidden;
position: relative;
margin: 0 auto 5rem;
height: 40rem;
width: 1000px;
max-width: 100%;
}
.item {
height: 5rem;
width: 5rem;
text-align: center;
line-height: 5rem;
font-size: 2rem;
border-top-left-radius: 70%;
border-bottom-right-radius: 70%;
background: #619371;
color: #FFFFFF;
position: absolute;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.item a {
color: #FFFFFF;
}
.item:nth-of-type(1) {
top: 30%;
left: 10%;
}
.item:nth-of-type(2) {
top: 20%;
left: 35%;
}
.item:nth-of-type(3) {
top: 15%;
left: 65%;
}
.item:nth-of-type(4) {
top: 30%;
left: 90%;
}
.item:nth-of-type(5) {
top: 40%;
left: 70%;
}
.item:nth-of-type(6) {
top: 55%;
left: 45%;
}
.item:nth-of-type(7) {
top: 80%;
left: 60%;
}
@media screen and (max-width: 35rem) {
.item:nth-of-type(1) {
top: 15%;
left: 15%;
}
.item:nth-of-type(2) {
top: 20%;
left: 45%;
}
.item:nth-of-type(3) {
top: 15%;
left: 80%;
}
.item:nth-of-type(4) {
top: 40%;
left: 80%;
}
.item:nth-of-type(5) {
top: 55%;
left: 50%;
}
.item:nth-of-type(6) {
top: 65%;
left: 20%;
}
.item:nth-of-type(7) {
top: 80%;
left: 70%;
}
}
.end {
height: 0;
width: 0;
position: absolute;
bottom: 0;
left: 60%;
}
@media screen and (max-width: 35rem) {
.end {
left: 70%;
}
}
</style>
<script src="https://unpkg.com/leader-line@1.0.5/leader-line.min.js"></script>
<script>
const items = document.querySelectorAll('.item');
const end = document.querySelector('.end');
const options = {
startSockets: [
'top',
'bottom',
'right',
'bottom',
'left',
'right'],
endSockets: [
'top',
'bottom',
'top',
'top',
'top',
'top'] };
new LeaderLine(items[6], end, {
dash: true,
size: 2,
color: '#BA8E59',
endPlug: 'arrow1',
endPlugSize: 2 });
for (let i = 0; i < items.length - 1; i++) {
new LeaderLine(items[i], items[i + 1], {
dash: true,
size: 2,
color: '#BA8E59',
endPlug: 'behind',
startSocket: options.startSockets[i],
endSocket: options.endSockets[i] });
}window.CP.exitedLoop(0);
</script>
