How to code an arrow using css

Question

Hi guys I\'m trying to code an arrow like this in css, I\'e viewed examples on codepen, but now I\'m thinking whether it is actually possible?

Answer 1

Here is another trick using only one element and multiple linear-gradient as background and you can adjust the size/position of each arrow individually:

.arrows {
  width:300px;
  height:100px;
  position:relative;
  background:
  /* For the 3 lines*/
  linear-gradient(#000,#000) 10px 25px/2px calc(100% - 30px),
  linear-gradient(#000,#000) 50% 0/2px calc(100% - 2px),
  linear-gradient(#000,#000) calc(100% - 10px) 25px/2px calc(100% - 30px),
  /*for the arrows*/
  linear-gradient(to top left,transparent 50%,#000 0%) 10px 100%/10px 10px,
  linear-gradient(to top right,transparent 50%,#000 0%) 0px 100%/10px 10px,
  
  linear-gradient(to top left,transparent 50%,#000 0%) calc(50% + 5px) 100%/10px 10px,
  linear-gradient(to top right,transparent 50%,#000 0%) calc(50% - 5px) 100%/10px 10px,
  
  linear-gradient(to top left,transparent 50%,#000 0%) 100% 100%/10px 10px,
  linear-gradient(to top right,transparent 50%,#000 0%) calc(100% - 10px) 100%/10px 10px;
  background-repeat:no-repeat;
}
.arrows:before {
  content:"";
  position:absolute;
  top:20px;
  left:10px;
  right:10px;
  height:8px;
  border:2px solid;
  border-bottom:none;
  border-radius:10px 10px 0 0;
  box-sizing:border-box;
}

How does each arrow work?

For each element we have the line and the extremity:

1. For the line, we simply need a linear-gradient with a solid color then we adjust the backround-size to control the line:

So if I consider this linear gradient:

body {
  height: 200px;
  border: 1px solid;
  margin:0;
  background: linear-gradient(#000,#000) 10px 25px/2px calc(100% - 30px) no-repeat;
}

We can read it as follow : Draw a line from 10px,25px with a thickness of 2px and a length of 100% minus 30px. 100% will refer to the height of the container.

2. For the extremity we will need two gradients, each one will create a rectangle triangle. To do this I simply need to specify a diagonal direction to my gradient (for example: to top right):

So if I consider this linear gradient:

body {
  height: 200px;
  border: 1px solid;
  margin:0;
  background: linear-gradient(to top right, #000 50%, transparent 0%) 30px 30px/10px 10px no-repeat;
}

We can read it as follow: start my gradient from 30px,30px with a size of 10px * 10px and fill 50% of it with black following the top right direction. So we will end up with a rectangle triangle having left and bottom side equal to 10px.

We do the same to create the other extremity and we simply make them close to each other to create the final visual:

body {
  height: 200px;
  border: 1px solid;
  margin:0;
  background: 
   linear-gradient(to top right, #000 50%, transparent 0%) 30px 30px/10px 10px no-repeat,
   linear-gradient(to top left,  #000 50%, transparent 0%) 20px 30px/10px 10px no-repeat;
}

Now all you have to do is to combine all these linear gradient and adjust size/position to obtain your layout.

You can easily scale for more arrows if needed as you simply need to append more gradient:

.arrows {
  width:300px;
  height:100px;
  position:relative;
  background:
  /* For the lines*/
  linear-gradient(#000,#000) 10px 25px/2px calc(100% - 50px),
  linear-gradient(#000,#000) 19% 20px/2px calc(100% - 30px),
  linear-gradient(#000,#000) 50% 0/2px calc(100% - 2px),
  linear-gradient(#000,#000) 70% 20px/2px calc(100% - 80px),
  linear-gradient(#000,#000) calc(100% - 10px) 25px/2px calc(100% - 30px),
  linear-gradient(#000,#000) calc(50% + 20px) 60px/ 40px 2px,
  /*for the arrows*/
  linear-gradient(to top left,transparent 50%,#000 0%) 10px calc(100% - 20px)/10px 10px,
  linear-gradient(to top right,transparent 50%,#000 0%) 0px calc(100% - 20px)/10px 10px,
  
  linear-gradient(to top left,transparent 50%,#000 0%) 20% calc(100% - 8px)/10px 10px,
  linear-gradient(to top right,transparent 50%,#000 0%) calc(20% - 10px) calc(100% - 8px)/10px 10px,
  
  linear-gradient(to top left,transparent 50%,#000 0%) calc(50% + 5px) 100%/10px 10px,
  linear-gradient(to top right,transparent 50%,#000 0%) calc(50% - 5px) 100%/10px 10px,
  
  linear-gradient(to top left,transparent 50%,#000 0%) 72% calc(100% - 58px)/10px 10px,
  linear-gradient(to top right,transparent 50%,#000 0%) calc(72% - 10px) calc(100% - 58px)/10px 10px,
  
  linear-gradient(to top left,transparent 50%,#000 0%) 100% 100%/10px 10px,
  linear-gradient(to top right,transparent 50%,#000 0%) calc(100% - 10px) 100%/10px 10px,
  
  linear-gradient(to top left,transparent 50%,#000 0%) calc(50% + 42px) 62px/10px 10px,
  linear-gradient(to bottom left,transparent 50%,#000 0%) calc(50% + 42px) 52px/10px 10px;
 background-repeat:no-repeat;
}
.arrows:before {
  content:"";
  position:absolute;
  top:20px;
  left:10px;
  right:10px;
  height:8px;
  border:2px solid;
  border-bottom:none;
  border-radius:10px 10px 0 0;
  box-sizing:border-box;
}