Нелинейная тень в HTML-дизайне

Question

Я пытаюсь создать более широкую тень сверху, как на картинке ниже. Он не должен быть очень кроссбраузерным, последние браузеры на базе Firefox и WebKit подойдут просто отлично. У кого-нибудь есть хорошие идеи, как это сделать?

Answer 1

Я еще не пробовал эту технику, но CSS3 включает свойство border-image, как описано здесь .Возможно, если вы разработали свою собственную тень, вы можете установить ее в качестве границы (или использовать элемент-оболочку с такой границей).

Answer 2

Вы можете попробовать поиграться с box-shadow и функцией перекоса свойства преобразования .Возможно, поместите прозрачный div с box-shadow под элементом содержимого, например:

#shadow{
    -webkit-transform: skewY(-10deg);
       -moz-transform: skewY(-10deg);
         -o-transform: skewY(-10deg);
            transform: skewY(-10deg);
    -webkit-box-shadow: 4px;
       -moz-box-shadow: 4px;
         -o-box-shadow: 4px;
            box-shadow: 4px;    
}

Answer 3

Я просто написал о чем-то похожем .

Answer 4

фотошоп или gimp, которые вам нравятся