Лучший способ сделать изогнутые тени

Что-то вроде этого:

box

Каким будет самый эффективный способ сделать это? Лучше всего сделать изображение, или есть способ достичь этого с помощью CSS без кучи хаков/дополнительной разметки, о которых я не знаю?

Кроме того, только теневое имеет для работы в IE9, FF и Chrome

Ответы

Ответ 1

Вы сделали бы это, используя псевдоэлементы и свойство box-shadow. Я привел пример для вас здесь: http://jsfiddle.net/joshnh/NWnXw/

Это работает в IE9 и выше.

/* Shadow */

.shadow {
    box-shadow: 0 1px 5px hsla(0,0%,0%,.25),
                inset 0 0 50px hsla(0,0%,0%,.05);
    position: relative;
}
.shadow:after,
.shadow:before {
    bottom: 7px;
    box-shadow: 0 10px 15px hsla(0,0%,0%,.25);
    content: '';
    height: 50%;
    left: 7px;
    max-width: 300px;
    position: absolute;
    right: 7px;
    z-index: -1;
    -webkit-transform: skew(-15deg) rotate(-8deg);
       -moz-transform: skew(-15deg) rotate(-6deg);
        -ms-transform: skew(-15deg) rotate(-6deg);
         -o-transform: skew(-15deg) rotate(-6deg);
            transform: skew(-15deg) rotate(-6deg);
}
.shadow:after {
    -webkit-transform: skew(15deg) rotate(8deg);
       -moz-transform: skew(15deg) rotate(6deg);
        -ms-transform: skew(15deg) rotate(6deg);
         -o-transform: skew(15deg) rotate(6deg);
            transform: skew(15deg) rotate(6deg);
}

Ответ 3

Если вы имеете в виду градиент:

background: -webkit-gradient(linear, top, bottom, from(#73B2F7), to(#6396D6));

background: -moz-linear-gradient(top, #73B2F7, #6396D6);

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#73B2F7', endColorstr='#6396D6');

Если вы имеете в виду тень, я написал python script для создания серии div-идентификаторов с шириной, соответствующей тем, которые необходимы для создания полукругов в углу и центрирования их в контейнере div выше и ниже текста. Smaple at: http://awgwa.com. Затем вам придется поместить его за кнопку с градиентом.