Border around arrows

Question

I'm trying make a banner out of arrows. What I am trying to achieve is to put a orange border around the whole arrow.

Please have a look at this fiddle. Is there anyway of doing this for the left and right side by using :before and :after?

I tried applying border to the :after but since there is already a border used to make the tip of the arrow I have no clue how I would be able to achieve this by only using css. Any help would be great,

Thanks in advance!

Answer 1

you may use gradients and background size to draw parts of arrow and bits of border:

body {
  margin: 20px;
  font-family: Helvetica;
  background: #d4f2ff;
}

#crumbs {
  text-align: center;
 
}

#crumbs ul {
  list-style: none;
  display: inline-table;
  min-width:960px
}

#crumbs ul li {
  float:left;;
}

#crumbs ul li a {
  float: left;
  height: 50px;
  background: linear-gradient(to right, transparent 1.2em, #3498db 1.2em);
  /* leave some blank bg to draw arrow */
  text-align: center;
  padding: 30px 40px 0 80px;
  position: relative;
  margin: 0 10px 0 0;
  border-top: 2px solid orange;
  border-bottom: 2px solid orange;
  font-size: 20px;
  text-decoration: none;
  color: #fff;
}

li+li {
  position: relative;
  margin-left: 7px;
}

li+li a:before {
  content: '';
  position: absolute;
  width: 3em;
  top: 0px;
  bottom: 0px;
  left: calc(-1em - 5px);
  background: linear-gradient(60deg, #3498db 1.2em, orange 1.25em,orange calc(1.2em + 3px), transparent calc(1.2em + 4px), transparent calc(2.2em - 3px), orange calc(2.2em - 2px), orange 2.2em, #3498db 2.35em)top no-repeat, linear-gradient(120deg, #3498db 1.2em, orange 1.25em,orange calc(1.2em + 3px), transparent calc(1.2em + 4px), transparent calc(2.2em - 3px), orange calc(2.2em - 2px), orange 2.2em, #3498db 2.35em)bottom left no-repeat;
  /* 2  gradients drawing end of arrow , borders and begining of next arrow */
  background-size: 100% 50%
}
li  a {/* smoothen a bit corners */
  border-radius:3px;
}
#crumbs ul li:first-child a {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  border-left: 2px solid orange;
  background: #3498db;/* draww full bg there is no arrows before that one */
}

#crumbs ul li:last-child a {
  padding-right: 80px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  border-right: 2px solid orange;
}

/* next is updates of gradients colors and bg for hover state */
#crumbs ul li:hover a:before {
 background: linear-gradient(60deg, #3498db 1.2em, orange 1.25em,orange calc(1.2em + 3px), transparent calc(1.2em + 4px), transparent calc(2.2em - 3px), orange calc(2.2em - 2px), orange 2.2em,  #fa5ba5  2.35em)top no-repeat, linear-gradient(120deg, #3498db 1.2em, orange 1.25em,orange calc(1.2em + 3px), transparent calc(1.2em + 4px), transparent calc(2.2em - 3px), orange calc(2.2em - 2px), orange 2.2em,  #fa5ba5 2.35em)bottom left no-repeat;
  background-size: 100% 50%
}

#crumbs ul li:hover +li a:before {
 background: linear-gradient(60deg, #fa5ba5 1.2em, orange 1.25em,orange calc(1.2em + 3px), transparent calc(1.2em + 4px), transparent calc(2.2em - 3px), orange calc(2.2em - 2px), orange 2.2em,  #3498db  2.35em)top no-repeat, linear-gradient(120deg, #fa5ba5 1.2em, orange 1.25em,orange calc(1.2em + 3px), transparent calc(1.2em + 4px), transparent calc(2.2em - 3px), orange calc(2.2em - 2px), orange 2.2em,  #3498db 2.35em)bottom left no-repeat;
  background-size: 100% 50%
}

#crumbs ul li:hover a {
  background: linear-gradient(to right, transparent 1.2em, #fa5ba5 1.2em);
}

#crumbs ul li:first-child:hover a {
  background: #fa5ba5;
}

<div id="crumbs">
	<ul>
		<li><a href="#1">One</a></li>
		<li><a href="#2">Two</a></li>
		<li><a href="#3">Three</a></li>
		<li><a href="#4">Four</a></li>
		<li><a href="#5">Five</a></li>
	</ul>
  </div>

codepen to play live with