
1 2 3 4 |
<div class="main" > Some text here! <span class="arrow" > </span> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
div.main{ position: relative; background: #fa720e; border-radius: 5px; padding: 10px; text-align: center; width: 150px; color: white; font-weight: bold; } div.main span.arrow{ position:absolute; left:45%; bottom:-5px; border-left:5px solid transparent; border-right:5px solid transparent; border-top:5px solid #fa720e; font-size:0px; line-height: 0px; } |
- The position of the parent element should be relative, in order to position the arrow relative to the parent.
- The arrow elements should have 3 borders total, 2 parallel borders(left and right here) with transparent colors.
- The third border’s color will decide the background of the arrow element.
- The direction of the arrow can be changed by the third border(here top).
DEMO
Some text here!
Follow Us