Need to place arrow between two city's names, please check the code.

Question

html code
<div style="display:inline-block;">
<div style="text-align:center;display:inline-block;"><span>Bengaluru</span><br><span class="text-muted">HSR Layout</span>

<div class="arrow">
<div class="line"></div>
<div class="point"></div>
</div>
<div style="text-align:center;display:inline-block;"><span>Hyderabad</span><br><span class="text-muted">Mehandipattanam</span>
</div>
</div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
CSS CODE
.arrow {
width:214px;
}

.line {
margin-top:5px;
width:199px;
background:blue;
height:3px;
float:left;
}
.point {
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 8px solid transparent;
border-left: 15px solid blue;
float:right;
}

Answer 1

https://code.sololearn.com/W8n5cwghamVw/?ref=app

Answer 2

I dont understand

Answer 3

It's a css for making arrows

Answer 4

Please make it in Sololearn Playground and share code here.

Answer 5

Kirti Shukla
How come `border-top` and `border-bottom` has 'solid transparent'?
How can it be solid and transparent at same time? and essentially, how does it work?

T.I.A 🙏