html {
    --shape-bg-color: #000;
}
.shape-circle {
    width: 50px;
    height: 50px;
    background: var(--shape-bg-color);
    border-radius: 50%
}

.shape-square {
    width: 50px;
    height: 50px;
    background: var(--shape-bg-color);
    border-radius: 5px;
}

.shape-triangle-up {
    width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-bottom: 50px solid var(--shape-bg-color);
}

.shape-triangle-down {
    width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-top: 50px solid var(--shape-bg-color);
}

.shape-star-six {
    width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-bottom: 50px solid var(--shape-bg-color);
    position: relative;
}
.shape-star-six:after {
    width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-top: 50px solid var(--shape-bg-color);
    position: absolute;
    content: "";
    top: 17px;
    left: -25px;
}


.shape-star-five {
    margin: 50px 0;
    position: relative;
    display: block;
    color: var(--shape-bg-color);
    width: 0px;
    height: 0px;
    border-right: 100px solid transparent;
    border-bottom: 70px solid var(--shape-bg-color);
    border-left: 100px solid transparent;
    transform: rotate(35deg);
}
.shape-star-five:before {
    border-bottom: 80px solid var(--shape-bg-color);
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    position: absolute;
    height: 0;
    width: 0;
    top: -45px;
    left: -65px;
    display: block;
    content: '';
    transform: rotate(-35deg);
}
.shape-star-five:after {
    position: absolute;
    display: block;
    color: var(--shape-bg-color);
    top: 3px;
    left: -105px;
    width: 0px;
    height: 0px;
    border-right: 100px solid transparent;
    border-bottom: 70px solid var(--shape-bg-color);
    border-left: 100px solid transparent;
    transform: rotate(-70deg);
    content: '';
}

.shape-pentagon {
    position: relative;
    width: 50px;
    box-sizing: content-box;
    border-width: 35px 11px 0;
    border-style: solid;
    text-align: -webkit-right;
    top: 0.7em;
    border-color: var(--shape-bg-color) transparent;
}
.shape-pentagon:before {
    content: "";
    position: absolute;
    height: 0;
    width: 0;
    top: -60px;
    left: -11px;
    border-width: 0 36px 25px;
    border-style: solid;
    border-color: transparent transparent var(--shape-bg-color);
}


.shape-hexagon {
    width: 50px;
    height: 25.735px;
    background: var(--shape-bg-color);
    position: relative;
}
.shape-hexagon::before {
    content: "";
    position: absolute;
    top: -19.8675px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-bottom: 20px solid var(--shape-bg-color);
}
.shape-hexagon::after {
    content: "";
    position: absolute;
    bottom: -19.8675px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-top: 20px solid var(--shape-bg-color);
}


.shape-octagon {
    width: 50px;
    height: 50px;
    background: var(--shape-bg-color);
    position: relative;
}
.shape-octagon:before {
    content: "";
    width: 50px;
    height: 0;
    position: absolute;
    top: 0;
    left: 0;
    border-bottom: 15px solid var(--shape-bg-color);
    border-left: 15px solid #fff;
    border-right: 15px solid #fff;
}
.shape-octagon:after {
    content: "";
    width: 50px;
    height: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: 15px solid var(--shape-bg-color);
    border-left: 15px solid #fff;
    border-right: 15px solid #fff;
}

.shape-heart {
    position: relative;
    width: 100px;
    height: 90px;
}
.shape-heart:before,
.shape-heart:after {
    position: absolute;
    content: "";
    left: 50px;
    top: 0;
    width: 50px;
    height: 80px;
    background: var(--shape-bg-color);
    border-radius: 50px 50px 0 0;
    transform: rotate(-45deg);
    transform-origin: 0 100%;
}
.shape-heart:after {
    left: 0;
    transform: rotate(45deg);
    transform-origin: 100% 100%;
}

.shape-diamond-narrow, .shape-rhombus {
    width: 0;
    height: 0;
    border: 30px solid transparent;
    border-bottom: 40px solid var(--shape-bg-color);
    position: relative;
    top: -30px;
}
.shape-diamond-narrow:after, .shape-rhombus:after {
    content: '';
    position: absolute;
    left: -30px;
    top: 40px;
    width: 0;
    height: 0;
    border: 30px solid transparent;
    border-top: 40px solid var(--shape-bg-color);
}

.shape-badge-ribbon {
    position: relative;
    background: var(--shape-bg-color);
    height: 50px;
    width: 50px;
    border-radius: 25px;
}
.shape-badge-ribbon:before,
.shape-badge-ribbon:after {
    content: '';
    position: absolute;
    border-bottom: 30px solid var(--shape-bg-color);
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    top: 43px;
    left: -4px;
    transform: rotate(-140deg);
}
.shape-badge-ribbon:after {
    left: auto;
    right: -4px;
    transform: rotate(140deg);
}


.shape-cross {
    background: var(--shape-bg-color);
    height: 50px;
    position: relative;
    width: 10px;
    margin: 0 2.5em;
}
.shape-cross:after {
    background: var(--shape-bg-color);
    content: "";
    height: 10px;
    left: -20px;
    position: absolute;
    top: 20px;
    width: 50px;
}