标签: clip-path
CSS中的剪辑路径插入不适用于chrome
我正在尝试使用CSS属性clip-path,但我Invalid property value在Chrome中遇到错误.
这是一个小型演示:
.clip-me {
clip-path: inset(0px 50px 50px 0px); /* top, right, bottom, left */
}<img class="clip-me" src="http://i.stack.imgur.com/MnWjF.png" width="100">
注意:这与剪辑路径上的这个问题不同,不适用于chrome,因为它特别询问如何使用SVG(而不是CSS)应用剪辑路径
根据我可以使用,它应该在chrome中工作.
推荐指数
解决办法
查看次数
是否可以使用带有剪辑路径的多个蒙版？
嗨,
我想知道是否可以在同一个元素上使用多个掩码,就像这样:
clip-path:polygon(8% 0%, 8% 7%, 14% 12%), polygon(96.4%, 92% 96.4%, 97% 92.3%), polygon(97% 15%, 99% 13%, 99% 0%);
有了这个,我将只能显示元素的某些区域彼此分开.
谢谢.
推荐指数
解决办法
查看次数
如何使剪辑路径在微软边缘工作？
在为Firefox和Microsoft Edge(ME)制作剪辑标题时,我使用了clip-path.它只是通过将clipPath元素放在SVG元素和clip-pathHTML元素内的样式中而在Firefox中工作.当我在ME上打开相同的代码时,它没有显示任何内容.
html,body,header {
margin:0px;
height:100%;
font-family: Arial Unicode MS;
}
button:hover {
transition:background-color 0.5s linear;
}
a:hover,li:hover {
opacity: 0.5;
transition:opacity 0.4s linear
}
#header {
width: auto;
height: 100%;
}
/************************** BANNER-SLIDER-HEADER BEGIN ************************/
.carousel,
.item,
.active {
height: 100%;
}
.carousel-inner {
height: 100%;
-webkit-clip-path: polygon(0 0, 0px 100%, 100% 85%, 100% 0);
clip-path: polygon(0 0, 0px 100%, 100% 85%, 100% 0);
-webkit-clip-path: url("#clipping");
clip-path: url("#clipping");
}
/* Background images are …推荐指数
解决办法
查看次数
创建反向剪辑路径 - CSS 或 SVG
我正在尝试创建本质上与 CSS 剪辑路径相反的内容。使用 clip-path 时，图像或 div 会被剪裁，以便仅保留您指定的形状，而有效删除背景的其余部分。
我希望这样，如果我剪辑一个形状，它基本上会在最上层打一个洞并移除形状，而不是背景。这可能吗？我也愿意接受 SVG 解决方案，但我是 SVG 新手，所以请善待:)
基本上，在下面的代码中，我有一个绝对位于红色方块内的蓝色方块，并希望能够从蓝色方块中冲压出一个形状，以便下面的红色层显示过去形状的位置。实际上会有一个图像作为背景层，所以我不能接受模仿我想要的但实际上并没有打出形状的伪效果。
任何帮助将是惊人的！
代码笔：https ://codepen.io/emilychews/pen/GQmyqx
body {
width: 100%;
height: 100vh;
padding: 0; margin: 0;
display: flex;
}
#box {
margin: auto;
position: relative;
width: 33%;
height: 200px;
background: red;
}
#innerbox {
width: 100%;
height: 100%;
background: blue;
top: 0;
left: 0;
position: absolute;
}<div id="box">
<div id="innerbox"></div>
</div>推荐指数
解决办法
查看次数
Chrome 上的剪辑路径在边缘留下一条奇怪的线
我使用Clip-path创建蓝色搜索按钮的特定形状。
在 Chrome 中，您会在切口边缘看到一条奇怪的线，而在 Firefox 中，一切正常。
我不是第一个指出这一点的人，但我还没有找到解决方案。
铬合金
火狐浏览器
剪辑路径是：
clip-path: polygon(0 0, 0 100%, 15px 50%);
这到底是什么玄机呢？我也发现了类似的问题：
推荐指数
解决办法
查看次数
具有内联SVG的响应式剪辑路径
在具有背景的元素上(图像或纯色并不重要):
<header id="block-header"></header>
我正在尝试使用SVG应用剪辑路径.为了实现这一点,我将SVG内联到这样的相同元素中:
<header id="block-header">
…
<svg width="100%" height="100%" viewBox="0 0 4000 1696" preserveAspectRatio="none">
<defs>
<clipPath id="myClip">
<path d="M0 1568.18V0h4000v1568.18S3206.25 1696 2000 1696C984.37 1696 0 1568.18 0 1568.18z"/>
</clipPath>
</defs>
</svg>
…
</header>
您可以运行下面的代码片段或检查JSFiddle.您可以看到内嵌的原始SVG图像(黑色),沿底部具有曲线并具有响应性.相反,红色矩形显示相同的图像(或者更确切地说,未应用)作为a clip-path.
我想我误解了viewBox或者preserveAspectRatio属性虽然找不到这里究竟是什么错误.任何帮助,将不胜感激.
#block-header {
background: Red;
min-height: 100px;
-webkit-clip-path: url(#myClip);
clip-path: url(#myClip);
}<h1>SVG image</h1>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100" viewBox="0 0 4000 1696" preserveAspectRatio="none"><path d="M0 1568.18V0h4000v1568.18S3206.25 1696 2000 1696C984.37 1696 0 1568.18 0 1568.18z"/></svg>
<h1><code>clip-path</code> using the same …推荐指数
解决办法
查看次数
剪辑路径在firefox [%values]中不起作用
我试图在Mozilla中运行svg clip-path但它不起作用.
.mask-1 {
-webkit-clip-path: polygon(0% 0%, 58% 0%, 39% 81.8%, 0% 81.8%);
clip-path: polygon(0% 0%, 58% 0%, 39% 81.8%, 0% 81.8%);
}
它完美适用于镀铬.任何人都可以帮助我使用Mozilla和其他浏览器吗？
推荐指数
解决办法
查看次数
具有通用浏览器支持的Clip-Path的替代方案？
我在我的网站上使用了一些剪辑路径多边形形状来创建向下指向的内容框,你可以在主页上看到一些例子:http://550.9f2.myftpupload.com/ 这是CSS我使用:
.bottom_arrow {
-webkit-clip-path: polygon(100% 0, 100% 85%, 50% 100%, 0 85%, 0 0);
clip-path: polygon(100% 0, 100% 85%, 50% 100%, 0 85%, 0 0);
}
但我明白这在没有一些修改(如使用.svg URL？)的Firefox中不起作用,即使这在IE和Edge中也不起作用.是否有一种替代的CSS技巧可以用来制作具有更好的跨浏览器支持的这些形状？
推荐指数
解决办法
查看次数
阻止剪辑子的CSS剪辑路径？
有没有办法阻止剪辑路径剪切它的孩子？例如,请考虑以下代码:
.el {
width: 300px;
height: 300px;
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
background-color: orangered;
}
h1 {
position: relative;
z-index: 100;
}<div class="el">
<h1>Work Hard, Play Hard</h1>
</div>推荐指数
解决办法
查看次数
如何调整 SVG 的 ClipPath 区域的大小？
我有这样的代码：
.img-container {
width: 300px;
height: 300px;
background-color: lightgreen;
overflow: hidden;
}
.clipped-img {
clip-path: url('#header-clip-svg');
}<div class="img-container">
<!--clipping SVG-->
<svg height="0" width="0">
<defs>
<clipPath id="header-clip-svg">
<path d="M199.6,18.9c-4.3-8.9-12.5-16.4-22.3-17.8c-11.9-1.7-23.1,5.4-32.2,13.2c-9.1,7.8-17.8,16.8-29.3,20.3c-20.5,6.2-41.7-7.4-63.1-7.5C38.7,27,24.8,33,15.2,43.3c-35.5,38.2-0.1,99.4,40.6,116.2c32.8,13.6,72.1,5.9,100.9-15c27.4-19.9,44.3-54.9,47.4-88.6c0.2-2.7,0.4-5.3,0.5-7.9C204.8,38,203.9,27.8,199.6,18.9z"></path>
</clipPath>
</defs>
</svg>
<!-- clipped image-->
<img class="clipped-img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3341051/team.jpg"/>
</div>我想增加剪裁形状尺寸，使其具有彩色绿色区域的宽度。有没有办法做到这一点？
推荐指数
解决办法
查看次数