clip-path:circle() 半径似乎没有正确计算
每当我尝试使用 CSS circle() 函数进行一些剪辑时，我一直困扰着我: .red {宽度:200px；高度:300px；背景:红色；边框:2px纯黑色；剪辑路径:圆(69%)；/* 几乎不切掉 .red div 的角 */}/* 整个圆圈将包围整个框，大约为 71% 或 (sqrt(2)/2 * 100%)根据 Mozilla 文档，而不是像人们期望的那样 100% */
..
clip-path相关内容
剪辑路径在 Firefox 中不起作用 [% 值]
我正在尝试在 mozilla 中运行 svg clip-path 但它不起作用. .mask-1 {-webkit-clip-path: 多边形(0% 0%, 58% 0%, 39% 81.8%, 0% 81.8%);剪辑路径:多边形(0% 0%、58% 0%、39% 81.8%、0% 81.8%)；} 它在 chrome 中完美运行.任何人都可以帮助我使用 mozilla 和其他浏览器吗?
..
创建反向剪辑路径 - CSS 或 SVG
我正在尝试创建本质上与 CSS 剪辑路径相反的内容.使用 clip-path 时，图像或 div 会被剪裁，以便仅保留您指定的形状，而背景的其余部分将被有效删除. 我希望这样，如果我剪辑一个形状，它基本上会在最上层打一个洞并移除形状，而不是背景.这可能吗?我也愿意接受 SVG 解决方案，但我是 SVG 的新手，所以请善待:) 基本上，在下面的代码中，我有一个绝对位于红色方块内的蓝色方块
..
带有内联 SVG 的响应式剪辑路径
在具有背景的元素上(图像或纯色并不重要): 我正在尝试使用 SVG 应用剪辑路径.为了实现这一点，我将 SVG 内联到同一个元素中，如下所示: …
..
如何从图像中剪切圆形部分?
我正在尝试使用 SVG 路径剪辑我的图像，但我的图像似乎不太适合. 这就是我想要实现的目标: 这就是我得到的: 这是我试过的代码: .topbar-chat-img {宽度:48px；高度:48px；适合对象:覆盖；剪辑路径:网址(#topbar-img-svg)；}
..
如何调整 SVG 的 ClipPath 区域的大小?
我有这样的代码: .img-container {宽度:300px；高度:300px；背景颜色:浅绿色；溢出:隐藏；}.clipped-img {剪辑路径:url('#header-clip-svg');}
..
将文本内容包裹在剪辑路径多边形(三角形)形状内，并将图像剪辑在另一半
我正在努力实现这样的目标
..
Svg 剪辑路径根据视口调整大小
我正在努力调整我的 HTML 设置中裁剪后的 svg 的大小.我寻找了类似的解决方案，但我还没有找到.我正在尝试根据垂直屏幕视口调整裁剪后的 svg 的大小.这是我的设置的 codepen 示例: .slider-image {剪辑路径:网址(#clip)；-webkit-clip-path: url(#clip);}
..
在解决方案中使用时，css剪切路径源URL发生更改
我需要通过在jsfiddle中实现的css剪切路径(源URL-image-1)覆盖highcharts plotband div- 演示: https://jsfiddle.net/BlackLabel/1yjwr4ck/
..
可能有多个多边形吗?
我正在尝试创建一个金字塔.我认为我会为此使用CSS clip-path .我打算做一个三角形(我设法做到了)，并在它下面做了几个梯形(甚至第一个也失败了). .container {最小宽度:50％；最大宽度:50％；}.三角形 {背景颜色:黄色；剪切路径:多边形(90％100％，50％0％，10％100％);}.trapeze {背景颜色:蓝色；剪切路径:多边形(0％10％，0％90％，
..
我无法在SVG内构图此图像
我想把它包起来 内部 也就是说，应该沿着云朵的路径将T恤裁剪到云端. 我尝试使用CSS边框蒙版，但未成功: .wrapper {background-image:url('https://svgshare.com/i/T9J.svg');背景重复:不重复；背景尺寸:200px；背景位置:50％50％；宽度:200像素；}.svg-border-mask {-webkit-
..
CSS-剪辑图像并添加边框以适合div
我希望从src图像中裁剪一个80px的圆圈，在所裁剪的部分周围添加一个红色边框(圆圈)，然后将其放入一个div框. 下面是一个示例，但红色边框不起作用.我希望剪切后的部分仅适合div，但现在div的大小是原始图像的大小. .my-clip {位置:绝对；剪贴路径:圆(80px at 50％25％);border:1px纯红色；//希望在剪切的部分周围有一个圆形边框背景颜色:#bdbd
..
带有CSS的响应式不规则背景形状
我一直在尝试使用纯CSS实现与图像中所示相同的结果.我尝试使用背景图片(封面...)，但没有响应(剪切形状)我设法通过剪切路径获得了相似的结果，但是没有圆角，而且并非所有浏览器都支持. .shape {背景:#16489F;剪切路径:多边形(5％0，95％0，100％50％，95％100％，5％100％，0％50％);} 我的目标是
..
如何使用剪切路径在图像中设置形状
是否可以使用 clip-path css将图像设置为相同的形状. 原始图片 带有CSS的预期图片 解决方案 您实际上并不需要剪切路径或蒙版.具有边界半径的偏斜变换可以做到这一点: .box {边距:50px;border-radius:80px 0;高度:300像素；背景:红色；位置:相对；背景:url(https://i.stack.imgur.com/rYeuk.j
..
如何在CSS中使用clip-path属性作为边框
我有 clip-part 来制作“切角"，效果. 我想将背景更改为白色，并使用绿色边框.问题是，当我将背景更改为白色时，边角为空: 如何在悬停上制作绿色边框角? .test {背景:红色；宽度:100px；高度:100px；/*角*/剪切路径:多边形(10px 0％，calc(100％-10px)0％，100％10px，100％calc(100％-10px)，calc(100％
..
如何为倾斜的边缘使用剪切路径?
当前使用此CSS进行从左到右的底部倾斜: clip-path:多边形(0 0，100％0，100％calc(100％-3vw)，0 100％); 它对于响应式解决方案非常有效，但是很难弄清楚如何针对div顶部从左到右倾斜的响应式解决方案执行此操作. 我尝试过: clip-path:多边形(0 0，100％calc(100％-29vw)，100％100％，0 100％); 谢谢
..
如何调整SVG的ClipPath区域的大小?
我有这样的代码: .img-container {宽度:300像素；高度:300像素；背景颜色:浅绿色；溢出:隐藏；}.clipped-img {剪切路径:url('#header-clip-svg');}
..
Internet Explorer/Edge的剪辑路径替代
我有一个项目，该项目使用剪切路径在整个设计中呈现倾斜.该项目的范围已更改，我现在需要支持不支持剪切路径的IE/Edge. 有一个常见的重复设计元素，其中将剪切路径应用于图像/文本组件包装，并剪切右下角(您可以在下面的代码段中看到它). 我不确定如何通过其他方式执行此操作，以便它可以在IE/Edge中运行.还有另一种方法可以使我不必导出已经应用了倾斜的图像吗? .image-tex
..
-webkit-clip-path不适用于Chrome吗?
以下代码在FireFox中可以正常工作，并且显示了一只蓝色的兔子: #item1 { display:block; width:500px; height:500px; background:#369; cl
..
clip-path:circle()半径似乎无法正确计算
每当我尝试使用CSS circle()函数进行一些剪辑时，就困扰了我一段时间: .red { width: 200px; height: 300px; background: red; border: 2px solid black; clip-path: circle(69%); /*barely cuts
..