标签: clip-path

.circle {
  -webkit-clip-path: circle(120px at center);
          clip-path: circle(120px at center);
}

.circle:hover {
  cursor:move;
}

<img src="http://www.publicdomainpictures.net/pictures/10000/nahled/2185-1265776088aCTz.jpg" alt="" class=" circle">

有没有办法让悬停只应用于图像的可见部分？

我正在尝试建立一种进度条，类似于Chris Coyier在这里所做的操作：https ://css-tricks.com/css3-progress-bars/ ，不同之处在于我想将SVG剪切路径应用于周围div元素。

例如，我想将SVG剪切路径应用于.rating-stars：

<div class="rating-stars">
    <span class="rating"></span>
</div>

您可以在此处查看到目前为止的内容：http : //codepen.io/rleichty/pen/GrWmRR

由于某些原因，它在Safari中不起作用，我也不确定如何调整SVG剪切路径的大小（如果可能的话）。

有谁知道我将如何做到这一点，或者有更好的解决方案？

我有一个卡片图像,带有带有修剪角的渐变,使用clip-path:

.card {
  width: 200px;
  height: 200px;
  background: linear-gradient(to bottom, blue, green);
  clip-path: polygon(20px 0, 100% 0, 100% 100%, 0 100%, 0 20px);
}

<div class="card"></div>

无论卡的大小如何,剪裁的角都必须有固定的大小,因此我使用像素作为剪裁角.

但clip-path目前还没有最好的浏览器支持,所以我尝试将这个HTML和CSS转换为SVG.

.container {
  width: 200px;
  height: 200px;
}

<div class="container">
  <svg viewBox="0 0 100 100" clip-path="url(#myClip)">
    <defs>
      <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
        <stop offset="0%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
        <stop offset="100%" style="stop-color:rgb(0,255,0);stop-opacity:1" />
      </linearGradient>
    </defs>
  
    <polygon points="20,0 100,0 100,100 0,100 0,20" fill="url(#grad1)" />
 </svg>
</div>

但问题是,无论卡片大小如何,我都无法使这个剪裁的角落具有固定的大小.

我不知道如何使这一行中滑块的底部部分可见，我使用剪辑路径使背景具有倾斜的顶部和底部。我尝试了 z-index、overflow 和position:relative 与所有元素的组合，但没有任何帮助：

http://sport.fusionidea.com/test-page/

我在 a 中有一个Container小部件，ClipPath它使用CustomClipper. 一切正常，我有所需的小部件形状。

但是，我找不到为这个自定义形状的 Widget 制作阴影的方法。另外，我想要一个自动跟随这个自定义小部件边缘的轮廓（边框）。

再次没有运气。我试过BoxDecoration:border，BoxDecoration:boxShadow，ShapeDecoration:shape，ShapeDecoration:shadows，Material:Elevation，等。

每当我尝试使用 CSS circle()函数进行一些剪辑时，它一直困扰着我一段时间，如下所示：

.red {
  	width: 200px;
        height: 300px;
        background: red;
        border: 2px solid black;
        clip-path: circle(69%);  /*barely cuts off the corners of the .red div */
}

/*  the full circle will enclose the entire box at around 71% or (sqrt(2)/2 * 100%)
 per Mozilla documentation and not at 100% as one might expect */

<div class='red'></div>

半径似乎从未像我期望的那样计算。在查看 Mozilla MDN 参考（https://developer.mozilla.org/en-US/docs/Web/CSS/basic-shape）时，他们似乎按如下方式计算：

这对我来说似乎不正确。我想他们会计算包围元素矩形（div、img 等）的圆周半径，如下所示：

但事实并非如此。任何人都可以对此有所了解。这是某种错误还是我只是不理解这里的某些内容？

我有一个 SVG 形状，用作clip-path图像的顶部 - SVG 形状应跟随鼠标的位置。

如果我使用clip-path:circle()，我可以让它工作，但如果使用则不行clip-path: url(#idOfMask)

就像使用 SVG 作为剪辑路径时我无法动态更改剪辑路径位置一样。？

clip-path: circle(100px at var(--clip-position) );
//clip-path: url(#mask at var(--clip-position)) ); //Doesnt work


$body.mousemove(function(e){  
  $cImg.css('--clip-position', `${e.pageX}px ${e.pageY}px`);  
});

完整代码

clip-path: circle(100px at var(--clip-position) );
//clip-path: url(#mask at var(--clip-position)) ); //Doesnt work


$body.mousemove(function(e){  
  $cImg.css('--clip-position', `${e.pageX}px ${e.pageY}px`);  
});

//const cImage = document.getElementById('clipped-image');
const $cImg = $('#clipped-image');
const $body = $('body');

$body.mousemove(function(e){  
  $cImg.css('--clip-position', `${e.pageX}px ${e.pageY}px`);  
});

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
} …

我需要帮助理解剪切路径CSS 属性，以便使我的剪切圆版本如下......

更像设计版本：

如果您可以在灰色背景上看到，我的圆圈在被剪裁后显得更大且更圆。

我该怎么做才能使圆圈更圆？我的想法是：

1. 使用剪辑路径，如下面的代码片段所示
2. 使用伪:after元素或带半径的右边框
3. 从 Photoshop 中剪切一个圆形图像并将其用作背景图像。

最好，我想避免使用背景图像。但是，我需要牢记响应能力，因为当我们调整窗口大小时，圆圈无法大幅改变形状。

剪辑路径是正确的方法吗？有人可以用另一种使用 CSS 的方式提出一个更简单、更优雅的解决方案吗？

提前谢谢您，这是我写的一个片段，说明了我如何剪切“绿色/蓝色”背景：

.page-banner {
  background: grey;
  width: 100%;
  height: 300px;
  background-position: top;
  overflow: hidden;
}

.page-banner-text {
  position: absolute;
  background: #00525d8a;
  padding-left: 100px;
  width: 60%;

  /* adjustments to snippet */
  top: 10px;
  left: 10px;
  height: 300px;
  
  /* this is the code for circle */
  clip-path: circle(560px at left);
  padding-right: 250px;
}

<div class="page-banner">
  <div class="container">
    <div class="page-banner-text">
      <h1 class="block-title">Programs For Adults</h1>
      <p>Programs to …

它是一个形状里面的矩形\xe3\x80\x82

-webkit-clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%);\nclip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%);\n

我怎样才能在里面夹一个圆？

这是我正在尝试创建的内容：

我应该能够做到这一点clip-path: polygon，但我不理解文档。

这个形状到底有什么属性？

clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);- 上、左、下、右？50%是多少？0是什么？它们代表什么？文档似乎没有说，除非我错过了。

我从另一篇文章中找到了一些代码，结果如下：

.inner-container-top {
  width: 130px;
  font-size: 12px;
  font-weight: 600px;
  background: #8b000a;
  color: #ffffff;
  padding: 7px;
  clip-path: polygon(0% 100%, 100% 100%, calc(100% - 30px) 0%, 0% 0%, calc(100% - 30px) 0%, 0% 0%);
}

<div class="inner-container-top">HELLOWORLD</div>

但我再次不明白为什么要这样做。我需要翻转它，使其向相反方向倾斜，并在左侧创建一个倾斜。如果可以的话请帮忙。