user244394 user244394 - 3 months ago 16
CSS Question

How to add 2 bordered triangle over a div tag

I have a div tag and I added one triangle on the div box. How do I add a second triangle?

I want to have 2 triangles, one for best and one for worst that will work on most browsers.

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

Here is the updated 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">
		<a href="logout.php"></a>

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