Question

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

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

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

由于

编辑：

 <div class="my-div">
     <img class="div-image" src="image.jpg" />
 </div>

 border-left: 300px solid red;
 border-right: 200px solid transparent;
 border-top: 30px solid transparent;
 border-bottom: 25px solid transparent;

这会在我希望图像为

的形状中创建一个倾斜边的框

以下是一个示例：jsfiddle

Answer 1

这里真正的问题是使用CSS边框来破解形状。

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

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

我建议您查找名为Raphael的库。有关您可以执行的一些操作，请参阅其网站上的示例。这一切都非常简单。你需要学习一些新的语法，但是一旦你掌握了基础知识，你就会对你能达到的目标感到惊讶。

[编辑] 我刚刚看到你对JSFiddle示例的编辑问题，你正在尝试做什么。

JSFiddle无法工作的原因是因为您在灰色背景下看到的形状由边框组成。框边框显示在框内容的顶部。在您的情况下，框边框占据整个框本身，因此您可以看到灰色边框。图像已加载但隐藏在框后面。我将重复我刚才所说的内容：除了简单的黑客之外，CSS Shapes不是一个很好的解决方案。如果您想要一个强大的解决方案，请使用SVG。

Answer 2

您需要在div中将图像设置为100％宽度。

示例：

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

CSS：

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

Answer 3

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

形成div的形象（CSS3）

3 个答案: