Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to create arrows with CSS?
With CSS, we can easily design arrows on a web page. This includes the top, bottom, left, and right arrows. Arrow is created using the border properties and then rotated to form an arrow. The rotation is performed using the rotate() method of the transform property.
Syntax
.arrow {
border: solid color;
border-width: 0 width width 0;
display: inline-block;
padding: size;
transform: rotate(angle);
}
Basic Arrow Structure
The foundation of CSS arrows uses border properties to create a triangular shape −
i {
border: solid rgb(62, 19, 182);
border-width: 0 6px 6px 0;
display: inline-block;
padding: 3px;
}
Arrow Directions
Each arrow direction requires a specific rotation angle using the transform property −
Right Arrow
.rightArrow {
transform: rotate(-45deg);
}
Left Arrow
.leftArrow {
transform: rotate(135deg);
}
Up Arrow
.upArrow {
transform: rotate(-135deg);
}
Down Arrow
.downArrow {
transform: rotate(45deg);
}
Complete Example
Here's a complete example showing all four arrow directions −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
padding: 20px;
}
i {
border: solid rgb(62, 19, 182);
border-width: 0 6px 6px 0;
display: inline-block;
padding: 3px;
margin: 5px;
}
p {
font-size: 18px;
font-weight: 500;
margin: 10px 0;
}
.rightArrow {
transform: rotate(-45deg);
}
.leftArrow {
transform: rotate(135deg);
}
.upArrow {
transform: rotate(-135deg);
}
.downArrow {
transform: rotate(45deg);
}
</style>
</head>
<body>
<h2>CSS Arrows</h2>
<p>Right arrow: <i class="rightArrow"></i></p>
<p>Left arrow: <i class="leftArrow"></i></p>
<p>Up arrow: <i class="upArrow"></i></p>
<p>Down arrow: <i class="downArrow"></i></p>
</body>
</html>
A webpage displays "CSS Arrows" as a heading, followed by four lines of text. Each line shows the arrow direction label followed by a small purple arrow pointing in the corresponding direction (right, left, up, down).
Key Points
| Direction | Rotation Angle | Visual Result |
|---|---|---|
| Right | -45deg | ? |
| Left | 135deg | ? |
| Up | -135deg | ? |
| Down | 45deg | ? |
Conclusion
CSS arrows are created by combining border properties to form a triangular shape and using transform rotate() to orient them in different directions. This technique provides a simple, scalable way to create directional indicators without requiring image files.
724 Views
