Frank W. Frank W. - 6 months ago 11
HTML Question

Border around arrows

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

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 calc(1.2em + 3px), transparent calc(1.2em + 3px), transparent calc(2.2em - 2px), orange calc(2.2em - 2px), orange 2.2em, #3498db 2.3em)top no-repeat, linear-gradient(120deg, #3498db 1.2em, orange calc(1.2em + 3px), transparent calc(1.2em + 3px), transparent calc(2.2em - 2px), orange calc(2.2em - 2px), orange 2.2em, #3498db 2.3em)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: #fa5ba5;
  background: linear-gradient(60deg, #3498db 1.2em, orange calc(1.2em + 3px), transparent calc(1.2em + 3px), transparent calc(2.2em - 2px), orange calc(2.2em - 2px), orange 2.2em, #fa5ba5 2.3em)top no-repeat, linear-gradient(120deg, #3498db 1.2em, orange calc(1.2em + 3px), transparent calc(1.2em + 3px), transparent calc(2.2em - 2px), orange calc(2.2em - 2px), orange 2.2em, #fa5ba5 2.3em)bottom left no-repeat;
  ;
  background-size: 100% 50%
}

#crumbs ul li:hover +li a:before {
  background: linear-gradient(60deg, #fa5ba5 1.2em, orange calc(1.2em + 3px), transparent calc(1.2em + 3px), transparent calc(2.2em - 2px), orange calc(2.2em - 2px), orange 2.2em, #3498db 2.3em)top no-repeat, linear-gradient(120deg, #fa5ba5 1.2em, orange calc(1.2em + 3px), transparent calc(1.2em + 3px), transparent calc(2.2em - 2px), orange calc(2.2em - 2px), orange 2.2em, #3498db 2.3em)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