How to create arrows in CSS - with complete example

How to create arrows in CSS - with complete example

Simple way to create arrow in your HTML page, just add few line of CSS and create it. There two step to add arrow in your page.

1. Your HTML code:

<p>Left arrow: <i class="arrow left"></i></p>
<p>Right arrow: <i class="arrow right"></i></p>
<p>Up arrow: <i class="arrow up"></i></p>
<p>Down arrow: <i class="arrow down"></i></p>

2. Your CSS code:

i {
    border: solid black;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
}
.left {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
}
.right {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}
.up {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
}
.down {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

Your page:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
i {
  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
}
.left {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
}
.right {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}
.up {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
}
.down {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}
</style>
</head>
<body>
<h1>CSS Arrows</h1>
<p>Left arrow: <i class="left"></i></p>
<p>Right arrow: <i class="right"></i></p>
<p>Up arrow: <i class="up"></i></p>
<p>Down arrow: <i class="down"></i></p>
</body>
</html>

Related posts

Write a comment