Как добавить тень на стрелку, созданную css? - PullRequest
Новая
       41

Как добавить тень на стрелку, созданную css?

0 голосов
/ 14 декабря 2018

Мне сложно добавить тень от рамки стрелки, созданной с помощью свойств границы.Есть ли способ сделать тень блока в форме такой же, как стрелка, вместо квадратного блока?

Вот это jsfiddle .

enter image description here

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;
}

Ответы [ 2 ]

0 голосов
/ 14 декабря 2018

Вы можете попробовать фильтр размытия, создав такую ​​же стрелку с псевдоэлементом: 

.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>
0 голосов
/ 14 декабря 2018

Попробуйте это.

Редактировать! 

.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>
...