CSS solid arrow
CSS Solid Arrow
In web development, we often need to use arrows to indicate an element or represent a certain behavior. In this article, we’ll learn how to create a solid arrow using pure CSS.
Basic Styles for Solid Arrows
First, let’s start with a simple solid arrow. We’ll use the CSS ::after and ::before pseudo-elements to create the arrow’s shape. Here is a basic example:
.arrow {
position: relative;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid black;
}
.arrow::before {
content: "";
position: absolute;
top: -20px;
left: -20px;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid black;
}
In the code above, we create a div element with a downward-pointing arrow and use the ::before pseudo-element to create an arrow of the same shape, which we then position above the original. This creates a solid arrow. You can adjust the size and color of the arrow as needed.
Solid Arrows Pointing Up, Down, Left, and Right
Next, let’s create solid arrows pointing up, down, left, and right. Here’s the corresponding code:
Upward Arrow
.arrow-up {
position: relative;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid black;
}
.arrow-up::before {
content: "";
position: absolute;
top: -20px;
left: -20px;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid black;
}
Downward Arrow
.arrow-down {
position: relative;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid black;
}
.arrow-down::before {
content: "";
position: absolute;
bottom: -20px;
left: -20px;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid black;
}
Leftward arrow
.arrow-left {
position: relative;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-right: 20px solid black;
border-bottom: 20px solid transparent;
}
.arrow-left::before {
content: "";
position: absolute;
top: -20px;
left: -20px;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-right: 20px solid black;
border-bottom: 20px solid transparent;
}
Right arrow
.arrow-right {
position: relative;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-left: 20px solid black;
border-bottom: 20px solid transparent;
}
.arrow-right::before {
content: "";
position: absolute;
top: -20px;
left: -20px;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-left: 20px solid black;
border-bottom: 20px solid transparent;
}
The above code blocks create solid arrows pointing up, down, left, and right, respectively. You can adjust the size and color of the arrows as needed.
Specifying Arrow Direction with ClassName
Sometimes we may need to display arrows pointing in different directions on the same page. To facilitate this, we can add different classNames to the arrows to specify their direction. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Arrow Directions</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="arrow arrow-up"></div>
<div class="arrow arrow-down"></div>
<div class="arrow arrow-left"></div>
<div class="arrow arrow-right"></div>
</body>
</html>
In the above example, we added different classNames to four different div elements to specify the direction of the arrow. This allows us to display arrows pointing up, down, left, and right on the same page.
Conclusion
Through this article, we learned how to use pure CSS to create solid arrows in different directions and specify the direction by adding different classNames.