CSS Arrow

Left Arrow in CSS

For that you need to create HTML first.

HTML

<div class="arrow-left">Home2it</div>
<div class="only-arrow-left"></div>

CSS

.arrow-left{
  position:relative;
  margin-left:10px;
  background:#ccc;
  display:inline-block;
  padding:10px;
}
.arrow-left:before{
  content:'';
  left:-16px;
  position:absolute;
  border:8px solid transparent;
  border-right-color:#000;
}

.only-arrow-left{
  display:inline-block;
  border:8px solid transparent;
  border-right-color:#000;
}

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”XaLZGb” default_tab=”css,result” user=”pradeepanvi”]See the Pen arrow-left in css by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

Top Arrow in CSS

For that you need to create HTML first.

HTML

<div class="arrow-top">Home2it</div>
<div class="only-arrow-top"></div>

CSS

.arrow-top{
  position:relative;
  margin-top:10px;
  background:#ccc;
  display:inline-block;
  padding:10px;
}
.arrow-top:before{
  content:'';
  top:-16px;
  position:absolute;
  border:8px solid transparent;
  border-bottom-color:#000;
}

.only-arrow-top{
  display:inline-block;
  border:8px solid transparent;
  border-bottom-color:#000;
}

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”brPLPQ” default_tab=”css,result” user=”pradeepanvi”]See the Pen arrow-top in css by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

Right Arrow in CSS

For that you need to create HTML first.

HTML

<div class="arrow-right">Home2it</div>
<div class="only-arrow-right"></div>

CSS

.arrow-right{
  position:relative;
  margin-right:10px;
  background:#ccc;
  display:inline-block;
  padding:10px;
}
.arrow-right:before{
  content:'';
  right:-16px;
  position:absolute;
  border:8px solid transparent;
  border-left-color:#000;
}

.only-arrow-right{
  display:inline-block;
  border:8px solid transparent;
  border-left-color:#000;
}

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”KvjQOj” default_tab=”css,result” user=”pradeepanvi”]See the Pen arrow-right in css by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

Bottom Arrow in CSS

For that you need to create HTML first.

HTML

<div class="arrow-bottom">Home2it</div>
<div class="only-arrow-bottom"></div>

CSS

.arrow-bottom{
  position:relative;
  margin-bottom:10px;
  background:#ccc;
  display:inline-block;
  padding:10px;
}
.arrow-bottom:before{
  content:'';
  bottom:-16px;
  position:absolute;
  border:8px solid transparent;
  border-top-color:#000;
}

.only-arrow-bottom{
  display:inline-block;
  border:8px solid transparent;
  border-top-color:#000;
}

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”QMXmLP” default_tab=”css,result” user=”pradeepanvi”]See the Pen arrow-bottom in css by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]