Wie füge ich 2 umrandete Dreieck über ein Div-Tag

Question

Ich habe ein Div-Tag und ich habe ein Dreieck auf der Div-Box. Wie füge ich ein zweites Dreieck hinzu?

Ich möchte zwei Dreiecke haben, eins für das beste und eins für das schlechteste, das auf den meisten Browsern funktioniert.

JSFiddle

.arrow_box { 
 
    top: 40px; 
 
    position: relative; 
 
    background: #ffffff; 
 
    border: 1px solid #719ECE; 
 
    width: 200px; 
 
    height: 22px; 
 
    border-radius: 3px; 
 
    -webkit-filter: drop-shadow(0 1px 10px rgba(113, 158, 206, 0.8)); 
 
    -moz-box-shadow: 0 1px 10px rgba(113, 158, 206, 0.8); 
 
    filter: drop-shadow(0 1px 10px rgba(113, 158, 206, 0.8)); 
 
} 
 

 
.arrow_box:after, 
 
.arrow_box:before { 
 
    bottom: 100%; 
 
    border: solid transparent; 
 
    content: " "; 
 
    height: 0; 
 
    width: 0; 
 
    position: absolute; 
 
    pointer-events: none; 
 
} 
 

 
.arrow_box:after { 
 
    border-color: rgba(255, 255, 255, 0); 
 
    border-bottom-color: #ffffff; 
 
    border-width: 19px; 
 
    left: 70%; 
 
    margin-left: -19px; 
 
} 
 

 
.arrow_box:before { 
 
    border-color: rgba(113, 158, 206, 0); 
 
    border-bottom-color: #719ECE; 
 
    border-width: 20px; 
 
    left: 70%; 
 
    margin-left: -20px; 
 
}

<div id="nicebox" class="arrow_box"> 
 
    <span class="pull-left">Best </span> 
 
    <span class="pull-right">Worst</span> 
 
</div>

Answer 1

Hier wird die aktualisierte Demo

.arrow_box { 
 
     top:40px; 
 
     position: relative; 
 
     background: #ffffff; 
 
     border: 1px solid #719ECE; 
 
     width: 200px; 
 
     height: 22px; 
 
     border-radius: 3px; 
 
     -webkit-filter: drop-shadow(0 1px 10px rgba(113,158,206,0.8)); 
 
     -moz-box-shadow: 0 1px 10px rgba(113,158,206,0.8); 
 
     filter: drop-shadow(0 1px 10px rgba(113,158,206,0.8)); 
 
    } 
 
    .arrow_box:after, 
 
    .arrow_box:before { 
 
     bottom: 100%; 
 
     border: solid transparent; 
 
     content: " "; 
 
     height: 0; 
 
     width: 0; 
 
     position: absolute; 
 
     pointer-events: none; 
 
    } 
 
    
 
    .arrow_box:after { 
 
     border-color: rgba(255, 255, 255, 0); 
 
     border-bottom-color: #719ECE; 
 
     border-width: 19px; 
 
     right: 0%; 
 
     /* margin-left: -10px; */ 
 
    } 
 
    .arrow_box:before { 
 
     border-color: rgba(113, 158, 206, 0); 
 
     border-bottom-color: #719ECE; 
 
     border-width: 20px; 
 
     left: 10%; 
 
     margin-left: -20px; 
 
    }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" crossorigin="anonymous"> 
 
    <div id="nicebox" class="arrow_box"> 
 
\t \t <a href="logout.php"></a> 
 

 
\t <span class="pull-left"><i class="fa fa-long-arrow-up" aria-hidden="true"></i>Best </span> 
 
\t \t \t <span class="pull-right">Worst</span> 
 
    </div>