Изгиб изображения с помощью CSS/JS/jQuery?

Question

Я пытаюсь стиль изображения на моем сайте с легким изгибающим эффектом и тени ниже согнутых частей изображения - так же, как это (если смотреть на Ebay):

ли кто-нибудь знаете, как достичь? Любые предлагаемые библиотеки jQuery или java-скриптов? Или это достигается только с помощью CSS?

Answer 1

Я сделал модификацию ответа slash197'S. Он выглядит точно так же, как на картинке, по крайней мере, в Firefox. Однако это смехотворно большое и требует дополнительной разметки.

Я положил изображение контейнера div (большая часть кода на slash197) внутри другого div. Затем я добавил еще один div и дал ему тень, а затем я правильно позиционировал его.

HTML:

<div class="container"> 
    <div class="shadow">&nbsp;</div> 
    <div class="img-container"> 
     <img src="http://your.server.com/path/to/your/image.jpg" /> 
    </div> 
</div> 

CSS:

.container { 
    position: relative; 
    display: inline-block; /* or block */ 
    margin: 20px; /* not required */ 
} 
.img-container { 
    padding: 5px; 
    border: 1px solid #cccccc; 
    border-radius: 2px; 
    display: inline-block; 
    background: white; 
    position: relative; 
    top: 0; 
    left: 0; 
} 
.shadow { 
    box-shadow: 0 20px 5px 5px #cccccc; /* adjust color, blur or spread if you want */ 
    transform: skewy(-3deg); 
    position: absolute; 
    left: 8px; 
    bottom: 22px; /* adjust this to change the shadow's size */ 
    height: 20px; 
    width: 100px; 
} 

Здесь во всей своей красе: http://jsfiddle.net/VCEJB/1/

EDIT: Изменено rotate к skewy, как это, вероятно, выглядит немного лучше.

Answer 2

Очень простое использование только CSS: поместите изображение в контейнер, создайте этот контейнер с заполнением, границей, радиусом рамки и тень окна.

Тень коробки даст вам другую тень, чем та, что в вашем примере, но этого может быть достаточно для вас, поэтому вам не понадобятся внешние библиотеки. Что-то вроде этого http://jsfiddle.net/k7Kpv/2/

div { 
    padding: 5px; 
    border: 1px solid #cccccc; 
    border-radius: 2px; 
    box-shadow: 4px 5px 12px -3px #cccccc; 
    display: inline-block; 
}