Можно ли объединить 2 бэкграунда в одну фигуру, чтобы к ней применялась одна непересекающаяся тень?

Question

[takinglimits]

Возможно ли из этого:

Сделать это:

Только средствами HTML/CSS?

Comments

[Сергей Сергей]

квадрат пусть див без теней, круг — бефор с тенью, тень квадрата от афтера, бефор и афтер под дивом. понятно?

[takinglimits]

Сергей Сергей, Да, спасибо

Answer 1

[HamSter]

1. Такой костыльный вариант jsBin

2. Пример с svg

<svg xmlns="http://www.w3.org/2000/svg" viewPort="0 0 500 500" width="100%" height="100%">
    <defs>
      <filter id="f1" x="-50%" y="-50%" height="200%" width="200%">
        <feOffset result="offOut" in="SourceAlpha" dx="0" dy="0" />
        <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
        <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
      </filter>
    </defs>

    <g filter="url(#f1)">
      <rect width="200" height="200" x="50%" y="50%" fill="#eee" style="transform:translate(-50px, -50px);"/>
      <circle r="100" cx="50%" cy="50%" fill="#eee" style="transform:translate(-50px, -50px);"/>
    </g>
</svg>

Answer 2

[Александр Алексеев]

filter: drop-shadow(0 0 10px rgba(0,0,0,0.5));
к родителю обоих

Comments

[takinglimits]

Господи, дай бог тебе здоровья