Search code examples
htmlcsssvgcss-shapes

How to create directional two pointed arrow using css?

How can I make this line with doubled arrow?

I've seen a few tutorials that teach you how to create boxes with arrows, however, in my case, none of those tutorials are suitable.

enter image description here

Solution

  • You can make this using pure css.(Quite easy and simple way which supports all browsers).

    HTML

    <div class="container">
  <span class="arrow-left"></span>
  <span class="arrow-right"></span>
</div>

    CSS

    .container{
width:60%; 
height:40px; 
background:#ccc; 
margin:100px auto;
}
.arrow-right {
width: 0; 
height: 0; 
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
border-left: 40px solid #ccc;
float:right;
margin-top:-20px;
margin-right:-40px;
}

.arrow-left {
width: 0; 
height: 0; 
border-top:40px solid transparent;
border-bottom: 40px solid transparent; 
float:left;
border-right:40px solid #ccc;
margin-top:-20px;
margin-left:-40px;
}

    Working Fiddle

    Fiddle

    Update

    You can also try to make this with pseudo classes like :before,:after but they have some browser compatibility in IE. (I will not prefer this method but it is an easy way).