标签: clip-path

我试图弄清楚如何最好地屏蔽具有角形状的div,如果在这种情况下顶部div将是背景图像,并且两个div都是100%宽度:

我已经看过很多关于如何用圆形图像掩盖图像的教程,但没有关于如何掩盖像红色区域这样的div边框的教程.我知道必须有比使用位图更好的方法,但我不知所措.

使用clip-path或SVG最好这样做吗？我不是那么担心旧浏览器,如果结果是他们看到红色/蓝色div用平线分开.整个红色区域将是一个背景图像,所以如果旧的(呃)浏览器错过了那个角度边界,那就这样吧.

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

clip-path: polygon(0 0, right 1em 0, 100% 50%, right 1em 100%, 0 100%, 0 0);

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

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

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

无论视口宽度如何，我都试图使带有倾斜底边的 div 具有相同的角度。

使用clip-path产生了最平滑的边缘，但我不知道是否有一个calc()我可以用来保持角度。

倾斜的伪元素可以工作，但抗锯齿效果很差，所以我想避免这种情况。

所以我的问题是：使用clip-path: polygon(0 0, 100% 0, 100% calc(/* what goes here */, 0 100%)什么是calc()这样的角度？在 A 边的所有宽度上为 86%？

我有一条如下所示的路径：

<path class="path" d="M0,550L0,366.6666666666667C0,366.6666666666667,95.43389463154384,198.61111111111114,143.31860620206734,183.33333333333337C191.20331777259085,168.0555555555556..."></path>

这样显示在我的页面上：

我希望这是显示一组矩形的剪切路径。我目前有它看起来像这样：

但是，我仍然希望它是2px的行，当它进入new领域时会改变颜色<rect>。我目前正在考虑通过某种方式将路径添加到中来解决此问题<clipPath>，但是我也对其他使该方法起作用的方法持开放态度。

我做了这个例子：

div {
 -webkit-clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%);
 clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%);
 background-color: red;
 width: 150px;
 height: 150px;
 position: relative;
}
ul{
 position: absolute;
 background-color: green;
 left: 30px;
 top: 50px;
}

<div>
 <ul>
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
   <li>5</li>
   <li>6</li>
   <li>7</li>
   <li>8</li>
   <li>9</li>
   <li>10</li>
  </ul>
</div>

如您所见，有一个包含 10 个数字的列表，但由于剪辑路径属性，div 行为始终为overflow: hidden.

我怎样才能让所有的都<ul>可见？

我可以使用ClipPath裁剪图像，但是如何向裁剪后的图像添加边框，如下所示？

我正在尝试使用 SVG 元素创建响应式 SVG 剪辑路径<path>。但是，我无法使其正常工作。

我已经使用更基本的形状（例如 ）让它工作<circle>，但不是<path>元素。我还让它使用元素的静态尺寸来工作<path>。

我使用此处的说明作为参考：https://www.smashingmagazine.com/2015/05/creating-responsive-shapes-with-clip-path/。我还在 StackOverflow 和其他示例上查看了类似的问题，但它们主要处理基本形状而不是路径变量。

我使用的 SVG 形状是从 Adob​​e Illustrator 导出的雨滴形状。

这是我的代码：

超文本标记语言

<svg id="raindropSVG" viewBox="0 0 810 1012">
    <defs>
        <clipPath id="raindropClipPath" clipPathUnits="objectBoundingBox">
            <path d="M0,604.4C0,523.7,30.7,408.8,97.5,320,217,160.9,409.2,0,409.2,0S597.2,167.8,717,331c63,85.7,93,196.4,93,274,0,224.5-181.3,407-405,407S0,829.5,0,604.4Z"/>
        </clipPath>
    </defs>
</svg>

<img src="clipped-image.jpg" alt="" class="clipped-img">

CSS

.clipped-img {
    clip-path: url(#raindropClipPath);
    width: 100%;
    height: auto;
}

#raindropSVG {
    width: 0;
    height: 0;
}

这个想法是，改变宽度（或高度）.clipped-img应该相应地缩放雨滴形状。

使用clipPathUnits="objectBoundingBox"对于做出clipPath响应是必要的。然而，一旦我添加这个，剪切的图像就会消失。

我认为我哪里做错了

我怀疑路径元素指定的路径不是相对单位，但我不知道如何将单位更改为相对单位。

预先感谢所有回复！

我有以下有效的 SVG：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
  <defs>
    <symbol id="triangle" class="triangle" viewBox="0 0 100 100" preserveAspectRatio="none">
      <polygon points="0,100 50,0 100,100" stroke="none" />
    </symbol>

    <symbol id="rect" viewBox="0 0 100 100" preserveAspectRatio="none">
      <rect width='100' height='100' stroke="none"/>
    </symbol>
  </defs>

  <use xlink:href="#rect" width="300" height="300" x="100" y="100"/>
  <use xlink:href="#triangle" width="120" height="150" x="180" y="100" fill="white" transform="rotate(180, 250, 175)"/>
</svg>

但当我尝试将其变成一个时，clipPath它却变成空白。想知道如何去clipPath上班。这是我尝试过的。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
  <defs>
    <symbol id="triangle" class="triangle" viewBox="0 0 100 100" preserveAspectRatio="none">
      <polygon points="0,100 50,0 100,100" stroke="none" /> …

任何人都可以指导我如何使用 SVG 独特的形状制作 CSS 图像剪辑路径？有些人建议使用第三方插件，例如 SVG Injector 等。任何人都可以帮助我如何完成这项适用于所有浏览器的任务？

我给出了一张示例图片以使其更好地理解。请检查下图。

http://ktdev.khaleejtimes.ae/shape.jpg

感谢并赞赏。

如何使用CSS创建形状，如下面的屏幕快照所示。绿色矩形看起来很容易制作，但是问题是橙色的和蓝色的。该项目是一个开源项目https://github.com/LLK/scratch-www，但是我找不到上述代码块的代码。

我可以得到一些提示吗？

图片来源：https : //scratch.mit.edu/projects/editor/?tutorial=getStarted