问题标签 [clip-path]

我在导航中使用 CSS 样式的剪辑路径来改变角落背景的形状。在我向内容区域添加下拉列表之前，这可以正常工作。

当下拉菜单被隐藏时，形状会正确显示，当下拉菜单可见时，形状会发生变化。根据我的研究，这是由于剪辑路径使用元素宽度和高度来确定元素的剪辑，并且当下拉列表可见时，元素高度会发生变化。

有没有办法改变这种行为？我的目标是保持相同的剪辑，无论下拉菜单是否可见。

CSS

HTML

JSFiddle

https://jsfiddle.net/7hg1efdj/1/

我想知道，我是否有可能保持 margin:top 响应所有场景，即不同的设备，或者我是否使用鼠标重新调整浏览器的大小？

HTML：

CSS：

这是我的jsFiddle。我想要的是，在下面的图片中提到。

这是我正在尝试使用 css 剪辑路径多边形开发的两种形状。但是当我给填充绿色的 div 顶部边距并且我重新调整浏览器窗口的大小时，它不包含它的位置。

我发现的一种解决方案是使用媒体查询并根据媒体查询更改边距顶部。但在重新调整浏览器大小的情况下，它不起作用。

如果我可以使用引导程序使保证金最高响应，对此有什么想法吗？

所以我在让这个特定的剪辑路径在 Firefox 中正确显示时遇到了问题，我不太确定如何让它正常工作。到目前为止，它在 WebKit 浏览器中正确显示。

我敢肯定这真的很简单，但我一辈子都无法弄清楚我在这里缺少什么才能让它在 Firefox 中正确显示。

我正在开发一个应用程序，但在实现 jQuery 拖放时遇到问题。请看一下代码。

我正在开发的是使用 css Clip Path 的多边形形状。当我拖动 Swipe Me Circle 并放在红色上时，它会返回“Dropped on Red”的警报，但它也会返回“Dropped on Blue”的警报，而 Circle 会掉在红色上。

我会感谢你的帮助。

我的 jQuery 代码是：

我现在正在做一个项目，我试图div在div. 我做得很好，但我也想要有div角度的侧面。我也能够做到这一点。我开始在其中添加我想要的东西div（底部和有角度的边）并且已经添加了一个div但是当我添加另一个（两者之间没有太大区别）时clip-path停止工作！我正在使用 HTML 和 CSS（无引导程序）。

这是我的代码（https://jsfiddle.net/MalMan35/uu7weo6o/4/）：

我想在我的图像上使用这个剪辑路径。

但是我的 svg 路径并没有相对于我绝对定位的 div.img-container 定位自己。

我怎样才能做到这一点？

我想剪切图像。并为此使用了剪辑路径。这适用于 Safari 和 Chrome，但不适用于 Firefox。我搜索了这个网站上的所有问题，这是我的代码的最后一个形状。但仍然无法使其在 Firefox 上运行。

这是我的形象：

这是我的 CSS：

最后将其添加到我的索引文件中：

但这仍然适用于 Safari 和 Chrome，但不适用于 Firefox。

我试图弄清楚如何最好地用像这样的角度形状来掩盖 div - 如果在这种情况下顶部 div 将是背景图像，并且两个 div 将是 100% 宽度：

我已经看过很多关于如何用圆形遮盖图像的教程，但没有关于如何遮盖 div 的边框（如红色区域）的教程。我知道肯定有比使用位图更好的方法，但我不知所措。

最好使用剪辑路径或 SVG 来做到这一点？如果结果是他们看到红色/蓝色 div 用一条平线分隔，我并不是那么关心旧浏览器。整个红色区域将是背景图像，所以如果旧的（er）浏览器错过了那个角边框，那就这样吧。

就像使用 CSS 从右侧偏移背景图像一样，我想shape相对于容器的右边缘定位我的一些绝对值。

这应该从右边的元素中切出一个三角形，长度为 1em。

我不能使用 % 因为三角形的大小将取决于元素的长度，这是我不想要的。

不幸的是，它不能以这种方式工作。还有其他解决方案吗？

我一直在努力使用 SVG 和剪辑路径。

我正在尝试创建一个三角形剪辑路径，该路径将覆盖照片以使顶部具有“三角形”边缘。

我试图实现与照片完全相同，但三角形“反转”。想象一下照片顶部而不是底部的同一个三角形。

我将如何实现这一目标？我可以使用填充颜色创建三角形本身，但它仍会显示三角形“上方”的图像。

在网上找到了这个，它完全符合我的要求，但这是错误的方式。