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!

many answers already , some involves gradient, an example provided once here http://codepen.io/gcyrillus/pen/mPezGB for question http://stackoverflow.com/questions/35795749/create-dynamic-arrow-like-shape-with-css/35815740 — G-Cyrillus, May 15 '16 at 21:07
Well I am trying something with your example. And it's working great. But only for the first, and last two block. Like is isn't executing the `:after` block anymore. https://jsfiddle.net/xx7agayv/ — Frank W., May 15 '16 at 22:08
Possible duplicate of http://stackoverflow.com/questions/27636373/how-to-make-this-arrow-in-css-only/28196665#28196665 — Harry, May 16 '16 at 06:42

G-Cyrillus · Accepted Answer · 2016-05-15T22:55:19.897

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

Super, just what i needed. You have any idea why the lines look so messy in the tip and back of the arrow? — Frank W., May 15 '16 at 22:25
@FrankW. hmm what browsers are you using ? same issue with the codepen ? — G-Cyrillus, May 15 '16 at 22:29
I'm using chrome 50.0.2661.94 (last version) Looks like that on the emulator from stackoverflow and when I run it locally — Frank W., May 15 '16 at 22:30
the codepen uses also a prefix generator, if you click on viewcompiled in css windows, you should see prefix added. is that it ? — G-Cyrillus, May 15 '16 at 22:39
yes indeed code is just the same, here is what my chrome render http://i.stack.imgur.com/CJ323.jpg (w7) gradient edges aren't that perfect — G-Cyrillus, May 15 '16 at 22:43
Are you able to open a chat? i have a quick question that maybe could solve this — Frank W., May 15 '16 at 22:47
did this updated inprove chrome render http://codepen.io/gcyrillus/pen/PNggEj/ ? (added some blur to the gradient) — G-Cyrillus, May 15 '16 at 22:52

Border around arrows

1 Answers1