CSS Sorusu

Arkadaşlar selam
Şöyle örnekteki gibi bir şey nasıl yapılabilir?
Resimde gördüğünüz şekiller sembolik.
3 adet div objesi olduğunu düşünün yada resim.

Şöyle birşey istiyorum.
Kırmızı divin, turuncu divin altında kalan kısmı gizlensin. Turuncu üstte kalsın.
Yeşil divinse turuncu divin altında kalan kısmı gizlenmesin, turuncu divin üzerine çıksın.
Fakat bunu yaparken z-index kullanamıyorum.
Çünkü yeşile 3, turuncuya 2 verirsem, yeşil bu seferde kırmızının üzerine çıkıyor.
Yeşil kırmızının altında, turuncunun üstünde olmalı.
Turuncu kırmızının üstünde ama yeşilin altında olmalı.
Bunu nasıl başarabilirim?

Kare turuncu div in before ına veya afterına yeşil nesnenin üzerine gelecek şekilde yeşil bir çizgi çizgi yapın. Yeşilin arkasındaymış gibi görünür.

O çizim bir örnek üst üste bindireceğim şeyler resim

Görselde o kısma nasıl bir alan geliyor. Görselleri görmeden fikir yürütemedim. Background ile benzeri bir görselin parçasını getirilir diye düşünüyorum.