Arrow

To create the arrow above, we use pseudo-elements :before and :after. When used, they appear before/after the selected element and we can use them to add certain user interfaces such as creating an arrow.

We can start first by understanding how to create a triangle on a HTML element as seen above. The idea is to use a box with border-left/right/top properties. For a right arrow, when we set the left border to pink, top and bottom to transparent, this creates a triangle from the right.

<div class="triangle"></div>

.triangle {
	border-top: 15px solid transparent;
	border-left: 15px solid pink;
	border-bottom: 15px solid transparent;
	width: 0;
	height: 0;
}

With that in mind, we can use the same technique on our .arrow:after to create the triangle on the right.

.arrow {
    position: relative; 
    height: 30px;
    background: pink;
    padding: 0px 12px;
    display: inline-block;
}

.arrow:after {
    position: absolute;
    content: ""; 
    border-top: 15px solid transparent;
    border-left: 15px solid pink;
    border-bottom: 15px solid transparent;
    right: -15px;
}

To build the inward triangle on the left, we can simply set border-left to transparent, top and bottom to pink. This gives us the shape we need.

<div class="triangle-inward"></div>

.triangle-inward {
	border-top: 15px solid pink;
	border-left: 15px solid transparent;
	border-bottom: 15px solid pink;
	height: 0;
	width: 0;
}
Arrow

Following the above, we have the arrow with the full css:

.arrow {
    position: relative; 
    height: 30px;
    background: pink;
    padding: 0px 12px;
    display: inline-block;
}

.arrow:before, 
.arrow:after {
    position: absolute;
    content: ""; 
}

.arrow:before {
    border-top: 15px solid pink;
    border-left: 15px solid transparent;
    border-bottom: 15px solid pink;
    left: -15px;    
}

.arrow:after {
    border-top: 15px solid transparent;
    border-left: 15px solid pink;
    border-bottom: 15px solid transparent;
    right: -15px;
}