How to draw border arround arrow?

Question

I want to draw border around entire arrow and the problem is on the right side cause it draws around square.

The reason is the right triangle is transparent and it sees it like that. Without that arrows won't be seen if they are colored the same.

Any ideas how to do that?

Here is jsfiddle

HTML

.firstArrow {
  position: relative;
  background: red;
  text-align: center;
  margin-right: 10px;
  margin-left: 0px;
  height: 50px;
  width: 330px;
  float: left;
  z-index: 3;
  padding-left: 50px;
  padding-top: 7px;
}

.firstArrow:before {
  content: '';
  position: absolute;
  width: 20px;
  height: 50%;
  left: 100%;
  top: 0;
  background: linear-gradient(to right top,red 50%,transparent 50%);
}

.firstArrow:after {
  content: '';
  position: absolute;
  width: 20px;
  height: 50%;
  left: 100%;
  bottom: 0;
  background: linear-gradient(to right bottom,red 50%,transparent 50%);
}

.secondArrow {
  position: relative;
  background: blue;
  margin-right: 10px;
  padding-left: 50px;
  padding-top: 7px;
  left: -20px;
  float: left;
  z-index: 2;
  height: 50px;
  width: 330px;

}
.secondArrow:before {
  content: '';
  position: absolute;
  width: 20px;
  height: 50%;
  left: 100%;   
  text-align: center;
  top: 0;
  background: linear-gradient(to right top,blue 50%,transparent 50%);
}

.secondArrow:after {
  content: '';
  position: absolute;
  width: 20px;
  height: 50%;
  left: 100%;
  bottom: 0;
  background: linear-gradient(to right bottom,blue 50%,transparent 50%);
}
.thirdArrow {
  position: relative;
  background: green;
  text-align: center;
  padding-top: 7px;
  height: 50px;
  width: 330px;
  left: -40px;
  float: left;
  z-index: 1;
}

.thirdArrow:after {
  content: '';
  position: absolute;
  width: 20px;
  height: 50%;
  left: 100%;
  bottom: 0;
  background: linear-gradient( to right bottom, green 50%,transparent 50%);
}
.thirdArrow:before {
  content: '';
  position: absolute;
  width: 20px;
  height: 50%;
  left: 100%;
  top: 0;
  background: linear-gradient( to right top, green 50%, transparent 50%);
}

<div class="firstArrow"> 1 </div>
<div class="secondArrow"> 2 </div>
<div class="thirdArrow"> 3 </div>

Something like this? http://jsfiddle.net/4ZeCz/4133/ – Rumplin Aug 20 '19 at 06:45 — Rumplin, Aug 20 '19 at 06:45
Seen it but didn't help me – Global Architect Aug 20 '19 at 07:18 — Global Architect, Aug 20 '19 at 07:18

Temani Afif · Accepted Answer · 2019-08-20T14:20:06.097

4

You can do the shape differently using skew transformation:

.arrow {
  position: relative;
  text-align: center;
  padding: 20px 0;
  width: 100px;
  float: left;
  color: #fff;
  z-index: 0;
}

.arrow:before,
.arrow:after {
  content: "";
  position: absolute;
  box-sizing: border-box;
  z-index: -1;
  top: 0;
  height: 50%;
  left: -3px;
  right: 0;
  transform: skewX(45deg);
  transform-origin: bottom;
  background: var(--c, red);
  border: 3px solid #000;
  border-bottom: 0;
}

.arrow:after {
  transform: scaleY(-1) skewX(45deg);
}

.arrow:first-child {
  overflow: hidden;
  border-left: 3px solid #000;
}

<div class="arrow"> 1 </div>
<div class="arrow" style="--c:blue;"> 2 </div>
<div class="arrow" style="--c:green;"> 3 </div>

edited Aug 20 '19 at 14:20

answered Aug 20 '19 at 08:46

Temani Afif

245,468
26
309
415

offtopic question; what is up with '--c:blue;'? I don't understand this CSS markup – Rumplin Aug 23 '19 at 08:11
1

@Rumplin it's a CSS variable that allow to easily change the color without the need of defining a new class. The background is set with that variable `background: var(--c, red);` and I simply need to change `--c` to have a new color (red is the default one) .. read this if you want more details: https://stackoverflow.com/a/49618941/8620333 – Temani Afif Aug 23 '19 at 08:47

nazifa rashid · Answer 2 · 2019-08-20T08:09:14.120

* {
  margin: 0;
  padding: 0;
}

.wrapper {
  position: relative;
  width: 30%;
}

.firstArrow {
  background: red;
}

.secondArrow {
  background: blue;
}

.thirdArrow {
  background: green;
}

.firstArrow, .secondArrow, .thirdArrow {
  margin-bottom: 20px;
  padding: 20px;
  text-align: center;
}

.firstArrow::before, .secondArrow::before, .thirdArrow::before {
    content: '';
    position: absolute;
    width: 41px;
    height: 41px;
    background: red;
    right: -21px;
    top: 9px;
    transform: rotate(45deg);
    box-sizing: border-box;
}

.secondArrow::before {
  background: blue;
}

.thirdArrow::before {
  background: green;
}

.firstArrow::after, .secondArrow::after, .thirdArrow::after {
  content: '';
  position: absolute;
  width: 49px;
  height: 49px;
  right: -26px;
  border: 1px solid;
  transform: rotate(45deg);
  box-sizing: border-box;
  top: 5px;
}

.firstArrow::after {
  border-color: red;
}

.secondArrow::after {
  border-color: blue;
}

.thirdArrow::after {
  border-color: green;
}

.blue-border::before, .red-border::before, .green-border::before {
    content: '';
    position: absolute;
    border: 1px solid red;
    transform: rotate(0);
    width: 100%;
    height: 68px;
    left: 0;
    top: -5px;
    background: transparent;
}

.blue-border::before {
  border: 1px solid blue;
}

.green-border::before {
  border: 1px solid green;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
   <div class="wrapper">
     <div class="firstArrow red-border"> 1 </div>
   </div>
  
  <div class="wrapper">
     <div class="secondArrow blue-border"> 2 </div>
   </div>
  
  <div class="wrapper">
     <div class="thirdArrow green-border"> 3 </div>
   </div>
</body>
</html>

Check if you wanted something like this!

Well not quite what I had in mind. Just a line around entire arrow. — Global Architect, Aug 20 '19 at 07:45
for this you need to use two colors, one for border and other for the bg. else it won't show unless you give some space. try using two colors — nazifa rashid, Aug 20 '19 at 08:10
Problem is that border for arrow:after and arrow:before is square not a triangle. Reason is cause one triangle is transparent but non the less still there. — Global Architect, Aug 20 '19 at 08:23

score 0 · Answer 3 · answered Aug 20 '19 at 08:58

Please check the below sample. Hope it will meet your requirements.The right side arrow head and its border are created using pseudo elements ::before and ::after

.firstArrow {
    position: relative;
    background: #eee;
    height: 50px;
    width: 150px;
    float: left;
    text-align: center;
    line-height: 50px;
    border: solid 3px #999;
}
.firstArrow:after,
.firstArrow:before {
    content: '';
    position: absolute;

}
.firstArrow:before {
    top: 0;
    right: -50px;
    z-index: 2;
    border: 25px solid;
    border-color: transparent transparent transparent #eee;
}
.firstArrow:after{
    top: -3px;
    right: -58px;
    z-index: 1;
    border: 28px solid;
    border-color: transparent transparent transparent #999;
}

<div class="firstArrow">shape 1</div><div class="firstArrow">shape 2</div><div class="firstArrow">shape 3</div>

How to draw border arround arrow?

3 Answers3