Псевдоэлемент под родителем - возможно?

[d0ublezer0]

https://jsfiddle.net/a8s1yxeq/

хочу сделать угол у переключателей с тенью, но псевдоэлемент получается над основным и тень видно слева. А запихнуть ниже не удается. Это возможно?

[npofopr]

Нет. Но лучше нарисуйте, что вы хотите в итоге. 

[d0ublezer0]

тогда проще отказаться от тени.

мне были нужны "угловые" кнопки градиентным фоном и тенью

что-то такое:

[AlexZaw]

04.03.2020 в 17:10, npofopr сказал:

Нет.

Вообще-то можно, если убрать z-index у родителя. Но тогда возникнет другая проблема - будет видно правую тень у родителя и ее придется перекрывать вторым псевдоэлментом.
Как-то так:

<div class="box"></div>

.box{
  height: 50px;
  width: 200px;
  box-shadow: 0 0 10px #000;
  position: relative;
  background: #f00;
  border-radius: 5px;
}
.box:after, .box:before{
  display: block;
  content: '';
  height: 37px;
  width: 36px;
  position: absolute;
  left: calc(100% - 20px);
  top: 50%;
  transform: translateY(-50%) scaleX(.5) rotate(45deg);
  background: #f00;
  border-radius: 5px;
}
.box:after{
  box-shadow: 0 0 10px #000;
  z-index: -1;
}

 

04.03.2020 в 16:53, d0ublezer0 сказал:

Это возможно?

Можно воспользоваться способом выше, а можно, если совместимость не сильно важна, воспользоваться свойствами clip-path и filter: drop-shadow

[d0ublezer0]

Мне нужна была даже не столько сама тень, сколько визуальное отделение кнопок друг от друга. В итоге я использовал еще один псевдоэлемент, и навесил на него полупрозрачный градиент.

https://jsfiddle.net/g0x7aj2v/

[AlexZaw]

04.03.2020 в 16:53, d0ublezer0 сказал:

хочу сделать угол у переключателей с тенью

 

1 час назад, d0ublezer0 сказал:

Мне нужна была даже не столько сама тень

как это стыкуется между собой? 🙂

[d0ublezer0]

2 часа назад, AlexZaw сказал:

как это стыкуется между собой? 🙂

Никак ))

Я некорректно описал задачу. Точнее, пытался решить ее иначе.