How to create css arrow shape tutorial

To create a css Arrow Shape use this code

HTML Code

<div class="arrow_box">Sample Text</div>

CSS Code

.arrow {
position: relative;
background: #d5d5d5;
border: 2px solid #121212;
}
.arrow:after, .arrow_box:before {
bottom: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}

.arrow:after {
border-color: rgba(213, 213, 213, 0);
border-bottom-color: #d5d5d5;
border-width: 40px;
left: 50%;
margin-left: -40px;
}
.arrow:before {
border-color: rgba(18, 18, 18, 0);
border-bottom-color: #121212;
border-width: 43px;
left: 50%;
margin-left: -43px;
}


Arrow -left CSS Code


.arrow {
position: relative;
background: #d5d5d5;
border: 2px solid #121212;
}
.arrow:after, .arrow_box:before {
right: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}

.arrow:after {
border-color: rgba(213, 213, 213, 0);
border-right-color: #d5d5d5;
border-width: 40px;
top: 50%;
margin-top: -40px;
}
.arrow:before {
border-color: rgba(18, 18, 18, 0);
border-right-color: #121212;
border-width: 43px;
top: 50%;
margin-top: -43px;
}


Arrow -Right CSS Code


.arrow {
position: relative;
background: #d5d5d5;
border: 2px solid #121212;
}
.arrow:after, .arrow_box:before {
left: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}

.arrow:after {
border-color: rgba(213, 213, 213, 0);
border-left-color: #d5d5d5;
border-width: 40px;
top: 50%;
margin-top: -40px;
}
.arrow:before {
border-color: rgba(18, 18, 18, 0);
border-left-color: #121212;
border-width: 43px;
top: 50%;
margin-top: -43px;
}


Arrow -Bottom CSS Code


.arrow {
position: relative;
background: #d5d5d5;
border: 2px solid #121212;
}
.arrow:after, .arrow_box:before {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}

.arrow:after {
border-color: rgba(213, 213, 213, 0);
border-top-color: #d5d5d5;
border-width: 40px;
left: 50%;
margin-left: -40px;
}
.arrow:before {
border-color: rgba(18, 18, 18, 0);
border-top-color: #121212;
border-width: 43px;
left: 50%;
margin-left: -43px;
}