Вставьте тень в поле с градусом (см. Пример)

Question

Пока я работал над некоторыми макетами изображений в css, у меня была идея создать тень для моих изображений. Проблема в том, что нигде в интернете или из моих собственных знаний я не могу найти ответ на свой вопрос.

Здесь вы можете увидеть iPhone с тем эффектом, который я хочу получить с помощью вставки с тенью CSS3. http://en.wikipedia.org/wiki/IPhone_5

У кого-нибудь есть идеи как это сделать? Советы тоже приветствуются! Заранее спасибо.

Answer 1

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

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

#test {
  height: 390px;
  width: 200px;
  background-color: blue;
  position: absolute; 
  overflow: hidden;
}


#test:after {
  content: "";
  position: absolute; 
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  -webkit-transform: rotate(-28deg) translateX(75%) translateY(-10%);
  -moz-transform: rotate(-28deg) translateX(75%) translateY(-10%);
  transform: rotate(-28deg) translateX(75%) translateY(-10%);
  background-image: -ms-linear-gradient(240deg, rgba(250,250,250,0.85) 50%, transparent);
  background-image: -moz-linear-gradient(240deg, rgba(250,250,250,0.85) 50%, transparent);
  background-image: -webkit-linear-gradient(240deg, rgba(250,250,250,0.85) 50%, transparent);
   background-image: linear-gradient(208deg, rgba(250,250,250,0.85) 50%, transparent); 
}

демонстрация