问题标签 [clip-path]

我试图找到一种方法，如何在给定的多边形边界内转换图像（如下所示）。当图像超过此边界时，我想剪切图像的这一部分。我尝试使用剪辑（过时且没有任何多边形形状）和剪辑路径（剪切图像本身，而不是图像内的边框应该移动）命令，但直到现在还没有任何有用的结果。

现在，我的盒子的代码片段及其所有内容：

我使用 css 中的 webkit-transform 命令翻译图像，如下所示：

我的动画是这样给出的：

所有这些关键帧都针对不同的浏览器类型进行了修改，并且它们可以正常工作。现在我希望这个动画图像在给定的多边形边界内平移，就像您在示例 (a) 中看到的一样。在示例 (b) 中，您会看到当前结果，该结果不起作用。

这是否可以旋转（rotateX 或 rotateY）一个元素，即使父级被屏蔽（剪辑路径）？像这样：

html

css

我用我的问题做了一个例子。

https://jsfiddle.net/29xecv6c/1/

谢谢

我希望能够将我创建的这个形状的最左边的 3 个角弄圆，知道怎么做吗？

我正在尝试来自http://www.smashingmagazine.com/2015/05/creating-responsive-shapes-with-clip-path/的 CSS Clip Path ，我遇到了这个疯狂的错误。简而言之，该代码适用于 CodePen 和 JSFiddle，但无法在我的本地/应用程序上运行。

这是我试图提出的多边形的代码。首先是CSS：

这是相关的HTML：

当我打开 index.html（上面的 HTML）时，它显示了一个矩形而不是我期望的多边形。然而，我遵循了文章中所述的确切说明。

然后我将代码复制到同一浏览器上的CodePen ( http://codepen.io/anon/pen/JdwrQw ) 和 JSFiddle ( http://jsfiddle.net/yk95wxmL/ )，它就可以工作了。

我一生都无法理解这一点。Firefox 理解并在 CodePen 和 JSFiddle 上的相同代码上剪辑路径，但不是在我的 HTML 上？可以肯定的是，我将整个 HTML 复制到 Codepen，并且 css 剪辑路径有效。这完全超出了我的范围。如果有人能提出一个可能显而易见但我不知何故错过的建议，我将不胜感激。

我遇到了一个奇怪的错误，我想。当我将过滤器应用于同一元素时，我通过引用的 SVG 元素未应用剪辑路径时遇到问题，因此我开始调查。

这不是导致问题的过滤器。我花了一段时间才找到这个，因为我的剪辑路径是一个完整的矩形，不知何故在没有过滤器的情况下工作。在这里查看我的帖子。

我发现在 Firefox 中根本没有应用剪辑路径，即使没有过滤器也是如此。不知何故，只有当我通过 HTML 引用 SVG#id 时，剪辑路径才有效<style></style>。<link rel="stylesheet" href="style.css">如果我正在应用所有其他 CSS ，它就无法工作。

由于 codepen 和 jsfiddle 可以使用<style>我无法创建和示例。请在此处下载文件进行测试： Dropbox

我创建了一个外部 css 文件和一个线条样式

首先在 Firefox 中尝试下载的文件。你会看到一个红色方块。然后将HTML文件中的XXX.traingle改为.triangle<style>并重新加载。瞧，一个红色的三角形。

这可能是什么原因造成的？还有更多，我怎样才能解决这个问题而不必定义 in <style>？我需要构建组件，所以这有点搞砸了。

尝试使用从路径派生的复杂剪贴路径在 svg 绘图中切割圆。当我使用形状而不是路径时它可以工作。

我想知道是不是因为路径是根据单独的坐标空间预先设计的？

相关代码如下：

我不希望图像的透明部分可点击。
我发现<map>但坐标以像素为单位，我想做一些响应式的事情。另一个问题：我找不到为什么第一张图片的底部和第二张图片的顶部之间有一些像素。

https://jsfiddle.net/tsfxy84u/

非常感谢你的帮助。

我正在尝试在我网站上的一些图像上塑造一个多边形。我的问题是多边形并不总是相同的宽度并且它基于图像宽度。我创建了一个代码笔，您可以看到我的问题： http ://codepen.io/doronsever/pen/bdyqYq 。
这是生成我的 svg clipath 的代码

如您所见，左上角的小三角形在两个图像上的大小不同。我如何控制它，使其始终保持相同的大小，而不管图像宽度如何？我不能使用 css 剪辑路径，因为我需要 FF 支持... 10x

这基本上是我想要实现的-> https://jsfiddle.net/tak1pyt7/1/

虽然我有一个解决方案，但小提琴中的代码存在各种问题，如下所示：

• 它在 IE 或 Edge 中不起作用，因为不支持剪辑路径
• 剪辑路径不支持 Firefox 中的 css 形状，如果您需要使其在 Firefox 中工作，那么您需要提供内联 svg
• 也尝试提供内联 svg，但它有自己的一组问题，无法解决我的要求。无论容器的高度和宽度如何，我都需要切割尺寸保持不变。使用现在切割图像的内联 svg，它的尺寸会随着高度和宽度的变化而变化，即切割是响应式的。我需要切割的静态尺寸。

除了上述解决方案之外，我还搜索了很多解决方案，这些解决方案可能会帮助我创建切角的 div，并且切口本身是透明的，因为我的背面没有纯色背景。

探索的其他解决方案

使用 CSS3 渐变示例

• 示例 --> http://jsfiddle.net/spdawson/3Tc8S/light/
• 当您的内容占据整个区域的高度和宽度时不起作用，例如我在帖子开头提供的小提琴。

使用 CSS 边框

• 示例 --> http://jsfiddle.net/spdawson/HhZQe/light/

• 对我不起作用，因为必须在其上进行切割的容器必须包含纯色背景色，而我的设计并非如此。

使用 jQuery 插件 ( http://jquery.malsup.com/corner/ )

• 示例代码 --> http://jsfiddle.net/spdawson/nxnCD/light/

• 你需要有纯色的背景色，考虑到我的要求，情况并非如此。我有一个图像作为背景。

一个可行但非常 HACKY 的解决方案

• 示例 --> http://jsfiddle.net/26v7pfLb/

• 我现在将此解决方案用于具有固定高度和宽度的容器，但我的应用程序中有一个页面，其中容器具有静态宽度但动态高度。在这种情况下，黑客将很难实施，并且个人使用此解决方案似乎很奇怪。

• 我试图找到更优雅和干净的东西来在 CSS 中实现这种解决方案

任何指针都会有所帮助。

我有一个带有向后和重叠img（位置：绝对；顶部：0px；左侧：10px；）链接的img，带有-webkit-clip-path：polygon（0px 150px，200px 150px，100px 0px）；。

但是：可见区域中 img.clip-path 下的链接不起作用。

这个问题是怎么解决的？可以用 SVG 创建另一个布局吗？

PS：z-index 和 position:relative 链接不起作用。SVG+clipPath 不起作用。

演示：http: //jsfiddle.net/9fjv4wbr/