如何在div标签上添加2有边三角形

Question

我有div标签，并在div框上添加了一个三角形。我如何添加第二个三角形？

我想要有2个三角形，一个最好，一个最差，可以在大多数浏览器上使用。

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

这里是更新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>