Arrow shape CSS
In this article, we will see how to create an arrow shape in CSS. We can add an arrow shape by linking to another website like font awesome, ionicons, etc. But we’re not going to do that, we’re going to create it using CSS
<!DOCTYPE html>
<html>
<head>
<title>CSS Arrow</title>
<style type="text/css">
.icon-arrows{
width: 100px;
height: 4px;
background-color: #000;
border-radius: 4px;
position: relative;
top: 50px; }
.icon-arrows:after{
content: "";
display: inline-block;
width: 40px;
height: 4px;
background-color: #000;
transform: rotate(45deg);
position: absolute;
right: -6px;
bottom: 13px; }
.icon-arrows:before{
content: "";
display: inline-block;
width: 40px;
height: 4px;
background-color: #000;
transform: rotate(-45deg);
position: absolute;
right: -6px;
bottom: -13px; }
</style>
</head>
<body>
<div class="icon-arrows"></div>
</body>
</html>Output:
Step by Step Guide for creating arrow in CSS
- First, we can write the Basic syntax of HTML and then we create a div tag with the classname “icon-arrows”.
- Then we style for div, we set Width, Height, and BG-Color to your liking. You should set the position to relative.
- We can style for “icon-arrows:after”. we set the content to empty, display to inline-block and transform to rotate(45deg), position to absolute as in the above code.
- And finally, we styled for the “before” pseudo selector. Whatever style we have given in the after pseudoselector, we should make a small change in it and give it in the before pseudoselector. We set to transform to rotate(-45deg), and bottom to – negative value.