CSS Arrow Icons

CSS Arrow Icons

HTML
<div class="icons">
   <div class="icon-1">
      <div class="arrow">
        <div class="right-arrow"></div>
     </div>
  </div>
</div>

<div class="icons">
   <div class="icon-2">
      <div class="arrow">
        <div class="left-arrow"></div>
     </div>
  </div>
</div>

<div class="icons">
   <div class="icon-3">
      <div class="arrow">
        <div class="top-arrow"></div>
     </div>
  </div>
</div>

<div class="icons">
   <div class="icon-4">
      <div class="arrow">
        <div class="bottom-arrow"></div>
     </div>
  </div>
</div>

<div class="icons">
   <div class="icon-5"> 
      <div class="circle-arrow">
          <div class="triangle"></div>
      </div> 
  </div>
</div> 
CSS
 .icons{
  float: left;
  margin: 2%;
  background: #EBBA16;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.icon-1 .right-arrow{
  border-style: solid;
  border-color: #FFF;
  border-width: 0 10px 10px 0;
  padding: 15px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  margin-left: -10px;
}

.icon-2 .left-arrow{
  border-style: solid;
  border-color: #FFF;
  border-width: 0 10px 10px 0;
  padding: 15px;
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  margin-right: -10px;
}

.icon-3 .top-arrow{
  border-style: solid;
  border-color: #FFF;
  border-width: 0 10px 10px 0;
  padding: 15px;
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  margin-top: 10px;
}

.icon-4 .bottom-arrow{
  border-style: solid;
  border-color: #FFF;
  border-width: 0 10px 10px 0;
  padding: 15px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  margin-top: -10px;
}

.circle-arrow .triangle{
  border-style: solid;
  border-width: 30px 0 30px 50px;
  border-color: transparent transparent transparent #FFF;
  margin-right: -10px;
}

DEMO

View Demo
925 Views
55170cookie-checkCSS Arrow Icons

Leave a Reply

Your email address will not be published. Required fields are marked *