Javascript 使用CSS/JS/jQuery弯曲图像效果？

我正在尝试在我的网站上用轻微的弯曲效果和图像弯曲部分下方的阴影来设计图像的样式，就像这样（在ebay上看到的）：

---

有人知道如何实现吗？有没有建议使用jQuery或java脚本库？或者只使用CSS就可以实现吗？

只使用CSS非常简单：将图像放在一个容器中，使用填充、边框、边框半径和框阴影设置该容器的样式

长方体阴影将为您提供与示例中不同的阴影，但它可能足够您使用，因此您不需要外部库。像这样的

---

仅使用CSS非常简单：将图像放在容器中，使用填充、边框、边框半径和框阴影设置容器样式

长方体阴影将为您提供与示例中不同的阴影，但它可能足够您使用，因此您不需要外部库。像这样的

---

我修改了slash197的答案。至少在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>

.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;
}

这就是它的全部荣耀：

---

编辑：将

旋转

更改为

歪斜

，因为它看起来可能稍微好一些。

我对slash197的答案进行了修改。至少在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>

.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;
}

这就是它的全部荣耀：

---

编辑：将

旋转

更改为

歪斜

，因为它看起来可能稍微好一些。

您发布的图片没有弯曲。效果来自阴影，阴影可以作为（背景）图像添加。哦，你是对的，这只是一个令人惊奇的视觉效果…；-）。。。我使用的图像大小不同。但我将尝试添加带有css的白色边框，并将阴影作为相对位于左下角的背景图像。尝试使用CSS3（根据slash197的答案修改）制作一个，但阴影有点变暗。如果可以的话，有人可以修复它。谢谢pietu1998，这对我来说足够公平：-）你贴的照片没有弯曲。效果来自阴影，阴影可以作为（背景）图像添加。哦，你是对的，这只是一个令人惊奇的视觉效果…；-）。。。我使用的图像大小不同。但我将尝试添加带有css的白色边框，并将阴影作为相对位于左下角的背景图像。尝试使用CSS3（根据slash197的答案修改）制作一个，但阴影有点变暗。如果可以的话，有人可以修复它。谢谢pietu1998，这对我来说很公平：-）谢谢你的回答，但这并不是我的意思。您建议的代码创建的阴影会在图像的两侧生成一个均匀的阴影，但我只需要在角上有一个阴影就可以产生这种“弯曲错觉”…slash197，感谢您的示例！谢谢你的回答，但这并不完全是我的意思。您建议的代码创建的阴影会在图像的两侧生成一个均匀的阴影，但我只需要在角上有一个阴影就可以产生这种“弯曲错觉”…slash197，感谢您的示例！哇，在firefox上看起来很棒！非常感谢，皮埃图！哇，在firefox上看起来很棒！非常感谢，皮埃图！