Nasıl Yapılır Gelişmiş Öneki Tasarımı

// #### legendarrow dan sonra istediğinizi yazın. ####
.legendarrowdpaketi {
    background-color: green;
}
.legendarrowdpaketi:before {
    content: "\f1ab";
}
.legendarroweklenti {
    background-color:purple;
}
.legendarroweklenti:before {
    content: "\f12e";
}
.legendarrowtema {
    background-color:orange;
}
.legendarrowtema:before {
    content: "\f568";
}

.legendarrowsürüm {
    background-color:#AA336A;
}
.legendarrowsürüm:before {
    content: "\f102";
}

.legendarrowduyuru {
    background-color: #e30a17;
}
.legendarrowduyuru:before {
    content: "\f12a";
}
.legendarrow:before {
    background-color: rgba(0,0,0,0.2);
    position: absolute;
    border-top-right-radius: 40px;
    border-right: 2px solid rgba(0,0,0,0.1);
    top: 0;
    bottom: 0;
    left: 0;
    padding: 1px 4px 0 3px;
    width: 20px;
    font-family: 'Font Awesome 5 Pro';
    font-size: inherit;
    font-style: normal;
    font-weight: 400;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
}
.legendarrow {
    color: rgba(255,255,255,0.8);
    border-radius: 2px;
    display: inline-block;
    position: relative;
    padding: 0 5px 0 32px;
    margin-bottom: 4px;
    cursor: pointer;
    font-size: 95%;
    font-weight: normal;
}
// #### legendarrow tarafından tasarlandı. ####