.boldright1{
    position: relative;
}
.boldright1::before{
    content: "";
    display: block;
    position: absolute;
    top: 8px; /*12px*/
    left: 20px; /*0px*/
    width: 30px; /*50px*/
    height: 5px; /*16px*/
    background: #fff;
}
.boldright1::after{
    content: "";
    display: block;
    position: absolute;
    top: 0px; /*0px*/
    left: 50px; /*50px*/
    width: 0;
    height: 0;
    border: 10px solid; /*20px*/
    border-color: transparent transparent transparent #fff;
}


.boldright2{
    position: relative;
}
.boldright2::before{
    content: "";
    display: block;
    position: absolute;
    top: 8px; /*12px*/
    left: 20px; /*0px*/
    width: 30px; /*50px*/
    height: 5px; /*16px*/
    background: #696696;
}
.boldright2::after{
    content: "";
    display: block;
    position: absolute;
    top: 0px; /*0px*/
    left: 50px; /*50px*/
    width: 0;
    height: 0;
    border: 10px solid; /*20px*/
    border-color: transparent transparent transparent #696696;
}



.boldright_a{
    position: relative;
}
.boldright_a::before{
    content: "";
    display: block;
    position: absolute;
    top: 8px; /*12px*/
    left: 20px; /*0px*/
    width: 20px; /*30px;*/ /*50px*/
    height: 5px; /*16px*/
    background: #fff;
}
.boldright_a::after{
    content: "";
    display: block;
    position: absolute;
    top: 0px; /*0px*/
    left: 40px; /*50px*/
    width: 0;
    height: 0;
    border: 10px solid; /*20px*/
    border-color: transparent transparent transparent #fff;
}


.boldright_b{
    position: relative;
}
.boldright_b::before{
    content: "";
    display: block;
    position: absolute;
    top: 8px; /*12px*/
    left: 20px; /*0px*/
    width: 20px; /*30px;*/ /*50px*/
    height: 5px; /*16px*/
    background: #696696;
}
.boldright_b::after{
    content: "";
    display: block;
    position: absolute;
    top: 0px; /*0px*/
    left: 40px; /*50px*/
    width: 0;
    height: 0;
    border: 10px solid; /*20px*/
    border-color: transparent transparent transparent #696696;
}




.boldleft{
    position: relative;
}
.boldleft::before{
    content: "";
    display: block;
    position: absolute;
    top: 12px; /*12px*/
    left: 40px; /*40px*/
    width: 100px;
    height: 16px;
    background: #666;
}
.boldleft::after{
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border: 20px solid; /*20px*/
    border-color: transparent #666 transparent transparent;
}


.arrow {
    height: 20px;
    width: 40px;
    background-color: #007bff;
    position:  relative;
    margin-top: 20px;
}

.arrow::after {
    content:  '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 0 20px 30px;
    border-color: transparent transparent transparent #007bff;
    position:  absolute;
    top: -50%;
    left: 100%;
}