tag.css

:root {
    --colour-0: #ddd;
    --colour-1: #fe5858;
    --colour-2: #fe9d58;
    --colour-3: #fee558;
    --colour-4: #c4fe58;
    --colour-5: #2efc46;
    --colour-6: #58feda;
    --colour-7: #5863fe;
    --colour-8: #c158fe;
    --colour-9: #fe58f3;

    --colour-golden: #ffcb43;
    --colour-golden-end: #aba4eb;
}

@font-face {
    font-family: 'Hun DIN 1451';
    src: url('hun.ttf');
}

body {
    margin: 24px;
}

.level-tag {
    font-family: 'Hun DIN 1451', sans-serif;
    font-weight: 600;
    font-size: 18px;
    padding-top: 5px;
    padding-bottom: 1px;
    padding-left: 6px;
    padding-right: 18px;

    /* min-width: 45px; */
    position: relative;

    display: inline-block;

    color: black;

    text-shadow: 0px 0px 3px #00000033;
}

.level-tag::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.level-tag::after {
    content: '';
    position: absolute;
    top: 0;
    height: 100%;
    z-index: -1;
}

.level-tag.badge-colour-1,
.level-tag.badge-colour-7,
.level-tag.badge-colour-8,
.level-tag.badge-colour-9 {
    color: white;
}

.level-tag.level-tag.golden {
    color: white;

    text-shadow: 0px 0px 6px #ff2727;
}

.level-tag.badge-colour-0::before,
.level-tag.end-colour-0::after {
    background-color: var(--colour-0);
}

.level-tag.badge-colour-1::before,
.level-tag.end-colour-1::after {
    background-color: var(--colour-1);
}

.level-tag.badge-colour-2::before,
.level-tag.end-colour-2::after {
    background-color: var(--colour-2);
}

.level-tag.badge-colour-3::before,
.level-tag.end-colour-3::after {
    background-color: var(--colour-3);
}

.level-tag.badge-colour-4::before,
.level-tag.end-colour-4::after {
    background-color: var(--colour-4);
}

.level-tag.badge-colour-5::before,
.level-tag.end-colour-5::after {
    background-color: var(--colour-5);
}

.level-tag.badge-colour-6::before,
.level-tag.end-colour-6::after {
    background-color: var(--colour-6);
}

.level-tag.badge-colour-7::before,
.level-tag.end-colour-7::after {
    background-color: var(--colour-7);
}

.level-tag.badge-colour-8::before,
.level-tag.end-colour-8::after {
    background-color: var(--colour-8);
}

.level-tag.badge-colour-9::before,
.level-tag.end-colour-9::after {
    background-color: var(--colour-9);
}

.level-tag.golden::before {
    background-color: var(--colour-golden);
}

.level-tag.golden::after {
    background-color: var(--colour-golden-end);
}

.level-tag.end-shape-0::before {
    /* Final 4 vertices stay the same */
    clip-path: polygon(100% 0, calc(100% - 15px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px, 5px 0);
}

.level-tag.end-shape-0::after {
    /* 8px is width, 15px represents slant */
    clip-path: polygon(0 100%, 8px 100%, calc(8px + 15px) 0, 15px 0);
    width: calc(8px + 15px);
    left: calc(100% - 15px + 4px);
}

.level-tag.end-shape-1::before {
    /* Final 4 vertices stay the same */
    clip-path: polygon(100% 0, calc(100% - 15px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px, 5px 0);
}

.level-tag.end-shape-1::after {
    /* 15px represents slant */
    clip-path: polygon(0 100%, 15px 0, calc(15px * 2) 100%);
    width: calc(15px * 2);
    left: calc(100% - 15px + 4px);
}

.level-tag.end-shape-2::before {
    /* Final 4 vertices stay the same */
    clip-path: polygon(100% 0, calc(100% - 13px) 50%, 100% 100%, 5px 100%, 0 calc(100% - 5px), 0 5px, 5px 0);
}

.level-tag.end-shape-2::after {
    /* 13px represents slant */
    clip-path: polygon(0 50%, 13px 0, calc(13px * 2) 50%, 13px 100%);
    width: calc(13px * 2);
    left: calc(100% - 13px + 4px);
}

.level-tag.end-shape-3::before {
    /* Final 4 vertices stay the same */
    clip-path: polygon(100% 0, calc(100% - 10px) 50%, 100% 100%, 5px 100%, 0 calc(100% - 5px), 0 5px, 5px 0);
}

.level-tag.end-shape-3::after {
    /* 10px represents left slant */
    clip-path: polygon(0 50%, 10px 0, calc(10px * 2.3) 25%, calc(10px * 2.3) 75%, 10px 100%);
    width: calc(10px * 2.3);
    left: calc(100% - 10px + 4px);
}

.level-tag.end-shape-4::before {
    /* Final 4 vertices stay the same */
    clip-path: polygon(calc(100% - 2px) 0, calc(100% - 10px) 20%, calc(100% - 10px) 80%, calc(100% - 2px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px, 5px 0);
}

.level-tag.end-shape-4::after {
    /* 10px represents left slant */
    clip-path: polygon(0 75%, 0 25%, 10px 0, calc(10px * 2) 25%, calc(10px * 2) 75%, 10px 100%);
    width: calc(10px * 2);
    left: calc(100% - 10px + 4px);
}

.level-tag.golden::before {
    /* Final 4 vertices stay the same */
    clip-path: polygon(calc(100% - 7px) 0, 100% 50%, calc(100% - 7px) 100%, 5px 100%, 0 calc(100% - 5px), 0 5px, 5px 0);
}

.level-tag.golden::after {
    /* 8px is width, 7px represents slant */
    clip-path: polygon(0 0, 8px 0, calc(8px + 7px) 50%, 8px 100%, 0 100%, 7px 50%);
    width: calc(8px + 7px);
    left: calc(100% - 7px + 4px);
}