Updated June 13, 2023
Introduction to CSS Arrow down
The arrows that can be created by using CSS are very simple. Arrows may determine how we access them in an application or website by conducting multiple activities such as “go to next page,” indicating “top or bottom, left or right,” and several others to scroll. In this article, we will use down arrows by using the CSS pseudo-elements & borders, and it’s easy to build various arrow styles that look amazing on mobile and desktop, respectively.
The CSS arrow-down can be specified by using the respective CSS classes and will be referenced with various types of styles. Therefore, the variety of CSS down arrows we’ve put together to get you started is below.
Syntax
We can write the syntax for the down arrow as shown below:
.down-arrow (name of the class) {
width: 0; // width for the element
height: 0; // width for the element
// other CSS styles
}In the examples section, we use the above format to use down arrows on the HTML page.
How does Arrow Down work in CSS?
The CSS down arrow could be used with the help of CSS animation and transition effects. For instance, we will use the bounce effect, apply the circle to the arrow, style arrow borders, background color, and many more. Below are some examples of CSS Arrow Down:
Example #1
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> CSS Down Arrow Example </title>
<style>
.arrow {
border: solid grey;
border-width: 0 4px 4px 0;
display: inline-block;
padding: 5px;
}
.myarrow {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
</style>
</head>
<body>
<p> Down Arrow Example: <br>
<i class="arrow myarrow"> </i> </p>
</body>
</html>Output:
Explanation: In the given example, we define the “marrow” class with a transform property, which enables us to rotate the elements, and it is set to 45 degrees. The “arrow” class also includes CSS styles to display the arrow. Use the above output steps for the rest of the examples.
Example #2
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> CSS Down Arrow Example </title>
<style>
body {
background: grey;
}
.div_center {
display: flex;
height: 50vh;
align-items: center;
}
.arrow_center {
position: relative;
border: 3px solid #fff;
width: 100px;
height: 100px;
border-radius: 50%;
}
span {
height: 4px;
margin: 2px;
width: 30px;
background: red;
transition: 0.3s ease;
}
span:first-child {
position: absolute;
transform: rotate(45deg);
left: 25%;
bottom: 35%;
}
span:nth-child(2) {
position: absolute;
transform: rotate(-45deg);
left: 45%;
bottom: 35%;
}
span:nth-child(3) {
position: absolute;
transform: rotate(45deg);
left: 25%;
bottom: 55%;
}
span:nth-child(4) {
position: absolute;
transform: rotate(-45deg);
left: 45%;
bottom: 55%;
}
.arrow_center:hover span:nth-child(1) {
transform: rotate(-100deg);
}
.arrow_center:hover span:nth-child(2) {
transform: rotate(100deg);
}
.arrow_center:hover span:nth-child(3) {
transform: rotate(150deg);
}
.arrow_center:hover span:nth-child(4) {
transform: rotate(-150deg);
}
</style>
</head>
<body>
<div class="div_center">
<div class="arrow_center">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</body>
</html>Output:
Explanation: The above examples use the transform property to rotate the element. Each element rotates according to the specified rotation values and the other CSS styles.
Example #3
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> CSS Down Arrow Example </title>
<style>
.arro {
box-sizing: border-box;
height: 5vw;
width: 5vw;
border-style: solid;
border-color: #9DC0F0;
border-width: 0px 1px 1px 0px;
transform: rotate(45deg);
transition: border-width 15ms ease-in-out;
}
.arro:hover {
border-bottom-width: 5px;
border-right-width: 5px;
}
.container {
display: flex;
justify-content: center;
background-color: grey;
height: 50vh;
}
</style>
</head>
<body>
<p> Down Arrow Example: <br>
<div class="container">
<a data-scroll href="#page_body">
<div class="arro"></div>
</a>
</div>
</p>
</body>
</html>Output:
Explanation: In the example, the down arrow is displayed with .arro class and the transform property, which rotates at 45 degrees. It provides the transition effect using the transition property, which occurs when the user hovers over an element. We display the arrow element within the container, as depicted in the image.
Example #4
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> CSS Down Arrow Example </title>
<style>
#arrow_down {
width: 50vw;
height: 50vh;
display: flex;
justify-content: center;
align-items: center;
}
.arrow {
width: 4vw;
height: 4vw;
border: 2vw solid;
border-color: black transparent transparent black;
transform: rotate(-135deg);
}
.arrow_down_slide {
position: absolute;
-webkit-animation: slide 5s linear infinite;
animation: slide 5s linear infinite;
}
.delay_time {
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
@-webkit-keyframes slide {
0% { opacity:0; transform: translateX(20vw); }
20% { opacity:1; transform: translateX(10vw); }
80% { opacity:1; transform: translateX(-10vw); }
100% { opacity:0; transform: translateX(-20vw); }
}
@keyframes slide {
0% { opacity:0; transform: translateX(20vw); }
20% { opacity:1; transform: translateX(10vw); }
80% { opacity:1; transform: translateX(-10vw); }
100% { opacity:0; transform: translateX(-20vw); }
}
</style>
</head>
<body>
<p> Down Arrow Example: <br>
<div id="arrow_down">
<div class="arrow_down_slide">
<div class="arrow"> </div>
</div>
<div class="arrow_down_slide delay_time">
<div class="arrow"> </div>
</div>
</div>
</p>
</body>
</html>Output:
Explanation: The example uses the transform property to rotate elements along with the specified styles. The styles arrow is specified in the arrow_down id. We apply the animation CSS property to animate between styles for 5 seconds. The @keyframes rule defines the values for the animating properties at numerous stages of the animation with the keyframe called a slide.
Example #5
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> CSS Down Arrow Example </title>
<style>
body {
background: grey;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-20px);
-moz-transform: translateY(-20px);
-ms-transform: translateY(-20px);
transform: translateY(-20px);
}
60% {
-webkit-transform: translateY(-10px);
-moz-transform: translateY(-10px);
-ms-transform: translateY(-10px);
transform: translateY(-10px);
}
}
.arrow_circle {
width: 50px;
height: 50px;
border-radius: 50px;
border: solid 1px white;
position: fixed;
left: 20%;
}
.arrow {
margin: 0 auto;
margin-top: 10px;
width: 30px;
height: 30px;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yOTMuNzUxLDQ1NS44NjhjLTIwLjE4MSwyMC4xNzktNTMuMTY1LDE5LjkxMy03My42NzMtMC41OTVsMCwwYy0yMC41MDgtMjAuNTA4LTIwLjc3My01My40OTMtMC41OTQtNzMuNjcyICBsMTg5Ljk5OS0xOTBjMjAuMTc4LTIwLjE3OCw1My4xNjQtMTkuOTEzLDczLjY3MiwwLjU5NWwwLDBjMjAuNTA4LDIwLjUwOSwyMC43NzIsNTMuNDkyLDAuNTk1LDczLjY3MUwyOTMuNzUxLDQ1NS44Njh6Ii8+DQo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMjIwLjI0OSw0NTUuODY4YzIwLjE4LDIwLjE3OSw1My4xNjQsMTkuOTEzLDczLjY3Mi0wLjU5NWwwLDBjMjAuNTA5LTIwLjUwOCwyMC43NzQtNTMuNDkzLDAuNTk2LTczLjY3MiAgbC0xOTAtMTkwYy0yMC4xNzgtMjAuMTc4LTUzLjE2NC0xOS45MTMtNzMuNjcxLDAuNTk1bDAsMGMtMjAuNTA4LDIwLjUwOS0yMC43NzIsNTMuNDkyLTAuNTk1LDczLjY3MUwyMjAuMjQ5LDQ1NS44Njh6Ii8+DQo8L3N2Zz4=);
background-size: contain;
}
.bounce {
-webkit-animation: bounce 3s infinite;
-moz-animation: bounce 3s infinite;
-ms-animation: bounce 3s infinite;
animation: bounce 3s infinite;
}
</style>
</head>
<body>
<p> Down Arrow Example: <br>
<div class="arrow_circle bounce animated">
<div class="arrow">
</div>
</div>
</p>
</body>
</html>Output:
Explanation: The example uses a bounce property that animates the arrow within 3 seconds. We apply the bounce property to different browsers according to the specified styles. To define the circle for the arrow, you can use the .arrow_circle class and apply the corresponding CSS styles. The bounce is a keyframe name that matches an animation to its keyframe declaration.
Conclusion
So far, we have studied various down arrows that can be easily tailored inside the website or an application. Using the CSS pseudo-elements and borders, we can easily create down arrows that look great on desktops and mobiles. Try building with the above code snippets; you will have better insights on down arrows.
Recommended Articles
We hope that this EDUCBA information on “CSS Arrow Down” was beneficial to you. You can view EDUCBA’s recommended articles for more information.
