Внутренняя крестовая тень градиентом

221

07 марта 2017, 15:22

Всем пример! Я недавно задавал, как сделать наклонную круговую внутреннюю тень.

Теперь ко мне пришла необходимость создать такую же тень, только в виде крестика. Как можно такое осуществить?

Answer 1

Создаёшь несколько градиентов, устанавливаешь им размер 50% 50% (ширина и высота). Ну а там дело техники

div { 
  width: 200px; 
  height: 200px; 
  background: 
    linear-gradient(45deg, black 0%, transparent 40%, transparent 50%, transparent 60%, black 100%) no-repeat 0px 0px, 
    linear-gradient(-45deg, black 0%, transparent 40%, transparent 50%, transparent 60%, black 100%) no-repeat 100px 0px, 
    linear-gradient(135deg, black 0%, transparent 40%, transparent 50%, transparent 60%, black 100%) no-repeat 0px 100px, 
    linear-gradient(-135deg, black 0%, transparent 40%, transparent 50%, transparent 60%, black 100%) no-repeat 100px 100px, 
    url(https://i.stack.imgur.com/OHM0K.png); 
  background-size: 100px 100px; 
}