How to add a box shadow to a css generated arrow?

Question

I'm having difficulty adding a box shadow around the outline of the arrow that was generated using border properties. Is there a way to make the box shadow in the shape the same as the arrow instead of a square box?

Here's a jsfiddle.

HTML:

<a class="bx-prev"></a>
<a class="bx-next"></a>

CSS:

.bx-prev, .bx-next {
  border-right: 15px solid green;
  border-bottom: 15px solid green;
  width: 35px;
  height: 35px;
  top: 200px;
  box-shadow: 0 0 10px 0 rgba(0,0,0,0.5);
}
.bx-prev {
  transform: rotate(135deg);
  position: absolute;
  left: 220px;
}
.bx-next {
  transform: rotate(-45deg);
  position: absolute;
  left: 320px;
}

PTA · Answer 1 · 2018-12-14T03:35:51.927

3

Try this.

Edit!

.bx-prev, .bx-next {
  border-right: 15px solid green;
  border-bottom: 15px solid green;
  width: 35px;
  height: 35px;
  top: 200px;
  -webkit-filter: drop-shadow(0px 0px 2px rgba(0,0,0,.7));
  filter: drop-shadow(0px 0px 2px rgba(0,0,0,.7));
}
.bx-prev {
  transform: rotate(135deg);
  position: absolute;
  left: 220px;
}
.bx-next {
  transform: rotate(-45deg);
  position: absolute;
  left: 320px;
}

<a class="bx-prev"></a>
<a class="bx-next"></a>

edited Dec 14 '18 at 03:35

answered Dec 14 '18 at 03:04

PTA

304
1
5

1

I like this! This is pretty close, but I want to be around the entire arrow, not just the front, but behind it, too, if possible? – TheAmazingKnight Dec 14 '18 at 03:08

score 1 · Accepted Answer · answered Dec 14 '18 at 08:22

1

You can try the blur filter by creating the same arrow with a pseudo element:

.bx-prev,
.bx-next {
  top: 200px;
  position:relative;
}

.bx-prev {
  transform: rotate(135deg);
  position: absolute;
  left: 220px;
}

.bx-next {
  transform: rotate(-45deg);
  position: absolute;
  left: 320px;
}
/*the arrow*/
.bx-prev:before,
.bx-next:before,
.bx-prev:after,
.bx-next:after{
  content:"";
  position:absolute;
  border-right: 15px solid green;
  border-bottom: 15px solid green;
  width: 35px;
  height: 35px;
}
/*the shadow*/
.bx-prev:after,
.bx-next:after{
  border-color: red;
  z-index:-1;
  filter:blur(5px);
}

<a class="bx-prev"></a>
<a class="bx-next"></a>

answered Dec 14 '18 at 08:22

Temani Afif

245,468
26
309
415

This is exactly the effect i was looking for. Not a lot of browser support for the `filter:blur()` but hopefully in the future it will be. Thank you! – TheAmazingKnight Dec 14 '18 at 14:04
1

@TheAmazingKnight the filter is well supported actually https://caniuse.com/#feat=css-filters .. only IE fail which is not a surprise – Temani Afif Dec 14 '18 at 14:10
I noticed in Firefox, it has a bug where the border rendering for arrows has a cut-through outline at the center point. Is there a fix for this? Check the updated jsfiddle https://jsfiddle.net/TheAmazingKnight/1cs2u798/ and you'll see what I mean. – TheAmazingKnight Dec 17 '18 at 02:47
@TheAmazingKnight try this way: https://jsfiddle.net/uf6m7k2e/ you won't have the issue – Temani Afif Dec 17 '18 at 08:33
Thank you for the alternative. I got a simple fix from a another stackoverflow question adding the translateZ property for firefox: `transform: translatez(1px) rotate(45deg);` – TheAmazingKnight Dec 17 '18 at 15:47

How to add a box shadow to a css generated arrow?

2 Answers2