How to make left and right arrow in css? - html

Question

I have a screenshot as shown below which I have to replicate in HTML/CSS. In the following screenshot I wasn't able to make colored left and right arrows in between the squares.
At this moment, I am able to replicate this in fiddle without colored left and right arrows.
The snippets of CSS code which I have used in order to make series of small squares are:
.squares .square {
width: 200px;
text-align: center;
height: 200px;
background-color: white;
border-radius: 15px;
}
Problem Statement:
I am wondering what CSS codes I should add in the fiddle so that colored left and right arrows in between the squares shows up in the fiddle.

Answer 1

You can do that by HTML special characters like below:
.squares {
display: flex;
justify-content: space-between;
align-items:center;
padding: 1rem;
background-color: rgb(238, 238, 238);
flex-wrap: wrap;
}
.squares .square {
width: 200px;
text-align: center;
height: 200px;
background-color: white;
border-radius: 15px;
}
.squares .square p
{
text-align: center;
vertical-align: bottom;
}
.arrows {
text-align:center;
}
.arrows span {
display:block;
font-size:48px;
line-height:32px;
color:green;
font-weight:bold;
}
.arrows span:first-child {
color:#C90;
}
<div class="squares">
<div class="square"><p>Franchise Hub Hierarchy</p><img src="https://s7.postimg.cc/jvu89zp17/Layer_30.png" alt=""/></div>
<div class="arrows">
<span>→</span>
<span>←</span>
</div>
<div class="square"><p>System wide user permissions</p><img src="https://s7.postimg.cc/6ronxc7a3/Layer_33.png" alt=""/></div>
<div class="arrows">
<span>→</span>
<span>←</span>
</div>
<div class="square"><p>Custom Corporate Branding</p><img src="https://s7.postimg.cc/wn8egkbor/Layer_46.png" alt=""/></div>
<div class="arrows">
<span>→</span>
<span>←</span>
</div>
<div class="square"><p>Configurable Workflow</p><img src="https://s7.postimg.cc/k8lmg8rwb/Layer_47.png" alt=""/></div>
<div class="arrows">
<span>→</span>
<span>←</span>
</div>
<div class="square"><p>Orders, C.R.M. and P.O.S</p><img src="https://s7.postimg.cc/9yj7h0hgb/Shape_33.png" alt=""/></div>
</div>

Answer 2

You can try font awesome arrows
https://fontawesome.com/icons/arrow-left?style=solid
or make arrows using CSS borders
#arrow {
width: 0;
height: 0;
border-top: 20px solid transparent;
border-left: 40px solid red;
border-bottom: 20px solid transparent;
margin-left: 20px;
}
#arrow:before {
content: "";
position: absolute;
width: 30px ;
height: 10px;
background: red;
left: 0;
top: 22px;
}
<div id="arrow"></div>
and if you want your text towards the bottom of your box, You should write <p> after <img>.
<div class="square">
<img src="https://s7.postimg.cc/jvu89zp17/Layer_30.png" alt=""/>
<p>Franchise Hub Hierarchy</p>
</div>

Answer 3

Here is the cure CSS and simplest solution for your problem.
I have done this for you, just add a div between every square div
<div class="arrowWrapper">
<span class="arrow redArrow"></span><br>
<span class="arrow greenArrow"></span>
</div>
and this css to your code:
.arrow {
display:block;
height: 2px;
margin: 3px 0;
width: 35px;
position: relative;
}
.arrow.redArrow {background-color: red;}
.arrow.greenArrow {background-color: green;}
.arrowWrapper { margin-right: -20px; margin-left: -20px;}
.arrow.redArrow:after{
position: absolute;
content: "";
height: 2px;
width: 12px;
background: red;
right: -1px;
transform: rotate(45deg);
top: -4px;
}
.arrow.redArrow:before{
position: absolute;
content: "";
height: 2px;
width: 12px;
background: red;
right: -1px;
transform: rotate(135deg);
top: 4px;
}
.arrow.greenArrow:after{
position: absolute;
content: "";
height: 2px;
width: 12px;
background: green;
left: -1px;
transform: rotate(135deg);
top: -4px;
}
.arrow.greenArrow:before{
position: absolute;
content: "";
height: 2px;
width: 12px;
background: green;
left: -1px;
transform: rotate(45deg);
top: 4px;
}
Complete code is in below snippetenjoy
.squares {
display: flex;
justify-content: space-between;
align-items:center;
padding: 1rem;
background-color: rgb(238, 238, 238);
flex-wrap: wrap;
}
.squares .square {
width: 200px;
text-align: center;
height: 200px;
background-color: white;
border-radius: 15px;
}
.squares .square p
{
text-align: center;
vertical-align: bottom;
}
.arrow {
display:block;
height: 2px;
margin: 3px 0;
width: 35px;
position: relative;
}
.arrow.redArrow {background-color: red;}
.arrow.greenArrow {background-color: green;}
.arrowWrapper { margin-right: -20px; margin-left: -20px;}
.arrow.redArrow:after{
position: absolute;
content: "";
height: 2px;
width: 12px;
background: red;
right: -1px;
transform: rotate(45deg);
top: -4px;
}
.arrow.redArrow:before{
position: absolute;
content: "";
height: 2px;
width: 12px;
background: red;
right: -1px;
transform: rotate(135deg);
top: 4px;
}
.arrow.greenArrow:after{
position: absolute;
content: "";
height: 2px;
width: 12px;
background: green;
left: -1px;
transform: rotate(135deg);
top: -4px;
}
.arrow.greenArrow:before{
position: absolute;
content: "";
height: 2px;
width: 12px;
background: green;
left: -1px;
transform: rotate(45deg);
top: 4px;
}
<div class="squares">
<div class="square"><p>Franchise Hub Hierarchy</p><img src="https://s7.postimg.cc/jvu89zp17/Layer_30.png" alt=""/></div>
<div class="arrowWrapper">
<span class="arrow redArrow"></span><br>
<span class="arrow greenArrow"></span></div>
<div class="square"><p>System wide user permissions</p><img src="https://s7.postimg.cc/6ronxc7a3/Layer_33.png" alt=""/></div>
<div class="square"><p>Custom Corporate Branding</p><img src="https://s7.postimg.cc/wn8egkbor/Layer_46.png" alt=""/></div>
<div class="square"><p>Configurable Workflow</p><img src="https://s7.postimg.cc/k8lmg8rwb/Layer_47.png" alt=""/></div>
<div class="square"><p>Orders, C.R.M. and P.O.S</p><img src="https://s7.postimg.cc/9yj7h0hgb/Shape_33.png" alt=""/></div>
</div>