Jquery 要形成div的图像（CSS3）

我使用CSS3边框创建形状，用户可以将图像拖到上面

问题是，我希望图像采用div的形状

这可以用CSS来完成，还是我需要用jQuery来完成

谢谢

编辑：

左边框：300px实心红色；
右边框：200px实心透明；
边框顶部：30px实心透明；
边框底部：25px实心透明；

这将创建一个具有倾斜边的长方体，其形状与我希望的图像相同

---

这里有一个例子：

这里真正的问题是使用CSS边框来攻击形状

如果你想做你想做的事情，你需要使用更好的解决方案——即使用真实的图形（可能是SVG或画布）创建形状，而不是在CSS中伪造形状。CSS形状是非常有限的，并且只有在展示CSS能够完成它们的事实时才真正有用。它们在实践中没有多大用处

我的建议是正确的。SVG是一种矢量图形格式，可以嵌入到HTML页面中，是解决问题的更好方法。您可以轻松创建任意形状的元素，并用图像填充它。SVG唯一的缺点是它不受旧浏览器（例如IE8）的支持，但这很容易解决，因为IE8支持一种称为VML的替代格式。有几个Javascript库可以与SVG或VML一起使用

我建议你查一个图书馆，叫做。查看他们网站上的示例，了解您可以做的一些事情。这真的很容易。你需要学习一些新的语法，但是一旦你掌握了基本知识，你就会对你能达到的目标感到惊讶

[编辑] 我刚刚看到了您对这个问题的编辑，以及您正在尝试做的JSFIDLE示例

---

JSFIDLE不起作用的原因是，您在灰色背景下看到的形状是由边框组成的。框边框显示在框内容的顶部。在您的例子中，方框边框占据了整个方框本身，因此您只能看到灰色边框。图像已加载，但隐藏在长方体后面。我将重复我最初所说的：CSS形状对于简单的黑客之外的任何东西都不是一个好的解决方案。如果您想要一个健壮的解决方案，请使用SVG。

您应该将图像设置为div内的100%宽度

例如：

<div class="new-shape">(image)</div>

---

你是说你想调整图像的大小？为什么不通过jquery将它们设置为backgroundimage并将backgroundrepeat设置为false？您有代码吗？另外，我不明白为什么您可能需要jquery。除非不应该动态地完成。但是无论如何，CSS在这里应该已经足够了。你可以在我的问题中看到我想要的东西和到JSFiddle的链接。JSFIDLE不起作用的原因是，你看到的灰色背景的形状是由边框组成的。框边框显示在框内容的顶部。在您的例子中，方框边框占据了整个方框本身，因此您只能看到灰色边框。图像已加载，但隐藏在长方体后面。我将重复我在回答中所说的：CSS形状对于简单的黑客之外的任何东西都不是一个好的解决方案。如果您想要一个健壮的解决方案，请使用SVG。您知道我将如何使用SVG吗？不过，我并不想每个点都有x/y co订单。这就是为什么我使用了边界div@Danield-嗯，是的。是的。（我想今天早上我的咖啡因还不够……）@Danield-btw，如果这里有明显的错误，请随意编辑。鼓励编辑。我的主要问题是如何将值存储在数据库中。我目前有一堆高度/宽度/位置（x，y）的行，当我循环通过时，会将一堆框装箱给用户。@SDC您是否使用Raphael实现了拖放？@user:是的，尽管不是在您描述的上下文中；我已经实现了一个系统，其中包括可拖动的元素，供用户定义形状等。我还没有将外部元素拖放到raphael元素中。但是，它响应标准DOM事件，因此应该可以正常工作。

<div class="new-shape">(image)</div>

div.new-shape img {
    width: 100%;
}

$("div[class=my-div]").css({  "position": "absolute",
        "top": "300px",
        "left": "200px",
        "display": "block",
        "width": "500px"
    });