body {
    background-color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    overflow: hidden;
}

.cenario {
    position: relative;
    width: 600px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.barra {
    position: relative;
    width: 100%;
    height: 12px;
    background-color: #fff;
    border-radius: 6px;
    transform-origin: center;
    display: flex;
    align-items: center;
}

.hexagono {
    position: absolute;
    width: 70px;
    height: 40.41px;
    background-color: #fff;
    left: 50%;
    bottom: 22px; 
    transform-origin: center;
}

/* Remove as linhas entre as partes do hexágono */
.hexagono::before, .hexagono::after {
    content: "";
    position: absolute;
    width: 0;
    border-left: 35px solid transparent;
    border-right: 35px solid transparent;
    left: 0;
}

.hexagono::before {
    bottom: 99%; 
    border-bottom: 20.5px solid #fff;
}

.hexagono::after {
    top: 99%; 
    border-top: 20.5px solid #fff;
}