.ribbon {
    padding: 50px;
    position: relative;
    display: inline-block;
    padding: 0 10px;
    height: 25px;
    line-height: 25px;
    vertical-align: middle;
    color: #fff;
    font-weight: bold;
    background-color: transparent;
    margin-right: 10px;
}

.ribbon-bg {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.ribbon::before,
.ribbon::after {
    content: '';
    position: absolute;
    top: -15px;
    width: 15px;
    height: 25px;
    border-style: solid;
    border-color: transparent;
    z-index: 0;
    clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
}

.ribbon-staff {
    color: #ffffff;
}
.ribbon-staff .ribbon-bg {
    background-color: #c86437;
}
.ribbon-staff::before {
    left: -15px;
    border-width: 10px 8px 10px 0;
    border-right-color: #9d4e2b;
}
.ribbon-staff::after {
    right: -15px;
    border-width: 10px 0 8px 10px;
    border-left-color: #9d4e2b;
}

.ribbon-owner {
    color: #ffffff;
}
.ribbon-owner .ribbon-bg {
    background-color: #e74c3c;
}
.ribbon-owner::before {
    left: -15px;
    border-width: 10px 8px 10px 0;
    border-right-color: #a92315;
}
.ribbon-owner::after {
    right: -15px;
    border-width: 10px 0 8px 10px;
    border-left-color: #a92315;
}

.ribbon-gamemaster {
    color: #ffffff;
}
.ribbon-gamemaster .ribbon-bg {
    background-color: #3498db;
}
.ribbon-gamemaster::before {
    left: -15px;
    border-width: 10px 8px 10px 0;
    border-right-color: #2958d6;
}
.ribbon-gamemaster::after {
    right: -15px;
    border-width: 10px 0 8px 10px;
    border-left-color: #2958d6;
}

.ribbon-helper {
    color: #ffffff;
}
.ribbon-helper .ribbon-bg {
    background-color: #6cd424;
}
.ribbon-helper::before {
    left: -15px;
    border-width: 10px 8px 10px 0;
    border-right-color: #499019;
}
.ribbon-helper::after {
    right: -15px;
    border-width: 10px 0 8px 10px;
    border-left-color: #499019;
}

.ribbon-administrator {
    color: #ffffff;
}
.ribbon-administrator .ribbon-bg {
    background-color: #e74c3c;
}
.ribbon-administrator::before {
    left: -15px;
    border-width: 10px 8px 10px 0;
    border-right-color: #a92315;
}
.ribbon-administrator::after {
    right: -15px;
    border-width: 10px 0 8px 10px;
    border-left-color: #a92315;
}

.ribbon-creationteam {
    color: #ffffff;
}
.ribbon-creationteam .ribbon-bg {
    background-color: #c388d8;
}
.ribbon-creationteam::before {
    left: -15px;
    border-width: 10px 8px 10px 0;
    border-right-color: #9f40c1;
}
.ribbon-creationteam::after {
    right: -15px;
    border-width: 10px 0 8px 10px;
    border-left-color: #9f40c1;
}