标签: clip-path
如何将clipPath应用于div位置相对于div位置的div
不知道我是否正确地制定了标题，但是问题来了。
我有一个像云一样的形状的SVG路径，我想在CSS中使用该clip-path属性。
<path d="M46.9819755,61.8637972 C42.0075109,66.8848566 35.0759468,70 27.4091794,70 C12.2715076,70 0,57.8557238 0,42.875 C0,32.9452436 5.3914988,24.2616832 13.4354963,19.534921 C14.8172134,8.52285244 24.3072531,0 35.8087666,0 C43.9305035,0 51.0492374,4.2498423 55.01819,10.6250065 C58.2376107,8.87215568 61.9363599,7.875 65.8704472,7.875 C78.322403,7.875 88.4167076,17.8646465 88.4167076,30.1875 C88.4167076,32.1602271 88.1580127,34.0731592 87.6723639,35.8948845 L87.6723639,35.8948845 C93.3534903,38.685457 97.2583784,44.4851888 97.2583784,51.1875 C97.2583784,60.6108585 89.5392042,68.25 80.0171204,68.25 C75.4841931,68.25 71.3598367,66.5188366 68.2822969,63.6881381 C65.5613034,65.4654463 62.3012892,66.5 58.7971106,66.5 C54.2246352,66.5 50.0678912,64.7384974 46.9819755,61.8637972 Z" fill="lightblue" />
当我在HTML中添加SVG元素并<clipPath>使用该路径进行定义时，浏览器会将剪切路径放置在左上角。如果我对剪切的元素应用边距，则遮罩未链接，并保持在其初始位置。
其他类似的线程指出clipPathUnits="objectBoundingBox"应将属性添加到<clipPath>对象，但这似乎无法解决我的问题。我什至将路径从绝对路径转换为相对路径，并像这样尝试，但是得到了相同的结果。
是否可以通过某种方式将剪切路径与剪切元素链接，以便在将定位应用于剪切元素时，剪切路径也会移动？
这是相对路径，如果有帮助的话：
<path d="M46.9819755,61.8637972c-4.974,5.021,-11.906,8.136,-19.573,8.136c-15.137,0,-27.409,-12.144,-27.409,-27.125c0,-9.93,5.392,-18.613,13.436,-23.34c1.381,-11.012,10.871,-19.535,22.373,-19.535c8.122,0,15.24,4.25,19.209,10.625c3.22,-1.753,6.918,-2.75,10.852,-2.75c12.452,0,22.547,9.99,22.547,22.313c0,1.972,-0.259,3.885,-0.745,5.707l0,0c5.682,2.791,9.586,8.59,9.586,15.293c0,9.423,-7.719,17.062,-17.241,17.062c-4.533,0,-8.657,-1.731,-11.735,-4.562c-2.721,1.778,-5.981,2.812,-9.485,2.812c-4.572,0,-8.729,-1.761,-11.815,-4.636z fill="lightblue" />
以及一些测试HTML / CSS。（我将left属性设置为，10px以便您看到出现裁剪问题）
<path d="M46.9819755,61.8637972 C42.0075109,66.8848566 35.0759468,70 27.4091794,70 C12.2715076,70 0,57.8557238 0,42.875 C0,32.9452436 5.3914988,24.2616832 …推荐指数
解决办法
查看次数
如何制作带边框的梯形
我尝试构建一个具有文本内容和边框（白色 1px 线）的梯形。
我发现了这样的例子：
height: 0;
width: 120px;
border-bottom: 120px solid #ec3504;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
这是一个 png 示例，如果我使用它作为透明颜色的背景，它会起作用，但有点像黑客，不太好......
“clip-path”似乎支持不够，那么还有其他方法吗？SVG 有可能吗？
提前致谢
推荐指数
解决办法
查看次数
如何使用滤镜：模糊与剪辑路径？
我正在尝试向六边形添加阴影clip-path。由于通常的box-shadow( 和filter:drop-shadow()) 不适用于剪辑路径，因此我尝试在下面使用更大的伪元素来伪造效果。该方法取自此处，在一个更简单的示例中效果很好：
body {
background-color: gray;
}
.rectangle {
margin: 10%;
position: absolute;
background: white;
width: 80%;
padding-top: 25%;
}
.rectangle::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
filter: blur(10px) brightness(20%);
transform: scale(1.1);
z-index: -1;
background-color: black;
}<div class="rectangle">
</div>然而，对剪切路径六边形使用完全相同的方法会失败。这个粗略的草图显示了所需的效果：
相反，我得到：
body {
background-color: gray;
}
.hexagon {
width: 20%;
padding-top: 25%;
-webkit-clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, …推荐指数
解决办法
查看次数
将多边形剪辑路径转换为 Microsoft Edge 支持的“clippath”svg 的最简单方法？
例如，我有一个 css 类，其中应用了多边形剪辑路径，如下所示：
.services-image-left {
-webkit-clip-path: polygon(0 0, 97% 0, 83% 100%, 0% 100%);
clip-path: polygon(0 0, 97% 0, 83% 100%, 0% 100%); }
但我知道要在 Edge 和 IE 中工作，我需要将“clippath”属性与 svg 点一起使用。有没有一种简单的方法可以将上面的多边形转换为 svg 形状，并将其应用到具有 .services-image-left 类的所有内容，如上面的示例？
推荐指数
解决办法
查看次数
在 Safari 中应用 SVG 剪辑路径时遇到问题
我正在尝试为按钮创建六边形边框。我的策略是使容器元素比按钮大几个像素，并clip-mask在两个元素上使用相同的像素。大小的差异应该会产生边框效果。这适用于 Firefox 和 Chrome，但不适用于 Safari。
document.getElementById("button").addEventListener("click", function(){alert("foo"); return false;});div {
width: 9rem;
height: 8rem;
position: relative;
clip-path: url("#hexagon");
-webkit-clip-path: url("#hexagon");
background-color: #e2e3e5;
}
button {
position: absolute;
cursor: pointer;
top: 2px;
left: 2px;
padding: calc(8rem * 0.1) calc(9rem * 0.2);
width: calc(9rem - 4px);
height: calc(8rem - 4px);
clip-path: url("#hexagon");
-webkit-clip-path: url("#hexagon");
background-color: white;
border: none;
}<div id="div">
<button id="button">The button</button>
</div>
<svg width="0" height="0" xmlns="http://www.w3.org/2000/svg">
<defs>
<clipPath id="hexagon" clipPathUnits="objectBoundingBox">
<polygon points=".25 0, .75 0, 1 …推荐指数
解决办法
查看次数
CSS — 如何模糊 SVG 蒙版？
我尝试模糊 SVG 剪辑路径，但没有成功。我尝试了不同的解决方案，但没有一个有效。我不确定除了 之外是否还有其他解决方案filter。
伪代码
- SVG 剪辑路径应显示下面的文本
- SVG 的边缘应该模糊
先感谢您。
超文本标记语言
.wrapper {
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.h1, blur {
width: 100vw;
height: 100vh;
}
.h1 {
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
font-size: 4em;
clip-path: url(#svgPath);
background-color: blue;
}
.blur {
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
font-size: 4em;
color: blue;
background-color: white;
filter: blur(8px)
}<div class="wrapper">
<h1 class="blur">
Our principles inform everything …推荐指数
解决办法
查看次数
剪辑路径插入圆
我有一个方形图像，想将其切成圆形以查看后面的内容（实际上是身体背景图像）。我找到了clip-pathCSS 属性，但我只是用图像创建一个圆圈，而不是创建一个被我的图像包围的圆圈。
到目前为止，我有一个白色背景，所以我只是创建了一个::after白色元素，带有嵌入的框阴影，但现在我得到了背景图像，所以我无法保留它。
有没有一种带或不带剪辑路径的方法来实现这一目标？
PS：最终的目标是制作一个旋转的音乐黑胶唱片，所以这个中间的孔是必要的！:)
谢谢。
推荐指数
解决办法
查看次数
如何在CSS中使用边框的clip-path属性
我必须clip-part做出“偷工减料”的效果。
我想将背景更改为白色并使用绿色边框。问题是，当我将背景更改为白色时，角落是空的：
如何在悬停时制作绿色边框角？
.test {
background: red;
width: 100px;
height: 100px;
/* CORNERS */
clip-path: polygon(10px 0%, calc(100% - 10px) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px), 0% 10px);
}
.test:hover {
background: white;
cursor: pointer;
border: 3px solid green;
}<div class='test'>Test</div>推荐指数
解决办法
查看次数
带有剪辑路径的视频在 Safari 中无法显示/工作
我用剪辑路径创建了一个视频。它在 Chrome 和 Firefox 上运行良好。但它在 Safari 中不起作用。视频看不到。只有当我在 safari 的浏览器控制台中停用剪辑路径时，我才能看到视频。所以问题的发生似乎是因为剪辑路径或者剪辑路径的 svg 标签有问题。有谁知道为什么以及我该如何解决这个问题？
我的代码如下：
body {
margin: 0;
width: 100%;
height: 100%;
overflow-x: hidden;
}
video {
margin-right: 0;
width: 46vw;
height: 100vh;
object-fit: cover;
}
.video-container {
position: absolute;
margin-left: 54vw;
height: 100vh;
}
.border-container {
position: absolute;
right: 0;
height: 100vh;
width: 50vw;
}
.svg-clipped-text {
-webkit-clip-path: url(#svgTextPath);
clip-path: url(#svgTextPath);
}
.st0{fill:#E30D45;}
.svg-border {
left: 0;
height: 100vh;
margin-left: 54vw;
position: absolute;
} <div class="video-container">
<video id="video1" width="1452" height="2000" class="svg-clipped-text" …推荐指数
解决办法
查看次数
如何使 css 剪辑路径多边形过渡平滑？
我有一个三角形，我想将其平滑地变形为不同的形状。
我使用简单的剪辑路径来执行此操作。我从元素上的剪辑路径开始，然后切换一个可以更改剪辑路径的类。这一切都非常简单。
剪辑路径发生了变化，但变化很剧烈。我想要一个平稳的过渡。有任何想法吗？
$('button').click(function(){
$('.shape').toggleClass('medium');
}).wrapper{
width: 100%;
height: 1000px;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
padding-top: 20px;
}
.shape{
height: 200px;
width: 200px;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
background: black;
position: initial;
transition: clip-path 2s ease-in-out;
}
.shape.medium{
clip-path: polygon(50% 1%, 63% 20%, 86% 15%, 81% 38%, 100% 50%, 81% 63%, 86% 86%, 63% 81%, 50% 100%, 37% 81%, 14% 86%, 19% 63%, 0% 50%, 19% 38%, 14% 15%, 37% 20%);
transition: clip-path 2s …推荐指数
解决办法
查看次数