div内的白色CSS箭头答案

【问题标题】：White CSS arrow inside divdiv内的白色CSS箭头
【发布时间】：2018-11-14 01:15:38
【问题描述】：

我希望以纯 CSS 方式创建这个进入图像内部的白色箭头，您可以在 sn-p 中找到 HTML，而不是编辑任何 HTML 代码。

.foto {
    width: 100%;
    float: left;
    min-height: 215px;
    background:
    linear-gradient(to bottom right,transparent 50%,#fff 0) bottom right/10% 50% no-repeat, linear-gradient(to bottom left,#fff 50%,transparent 0%) top right/10% 50% no-repeat, url(https://s3.pagegear.co/1/contents/blog/2016/imagen_cachorro_comprimir.jpg) center/cover
}

&lt;div class="foto bg_fix"&gt;&lt;img src="https://s3.pagegear.co/1/contents/blog/2016/imagen_cachorro_comprimir.jpg" itemprop="image" width="724" height="230" style="display: none;"&gt;&lt;/div&gt;

【问题讨论】：

关于svg剪辑路径的研究。
到目前为止您尝试了哪些方法？我可以给你复制/粘贴的代码，但我不会那样帮助你。提示：您可以使用剪辑路径（但并非所有浏览器都支持它）。如果您遇到困难，请告诉我。
我尝试使用线性渐变，但我能够做到，但白色三角形指向右侧。还有边框和变换倾斜属性，但我被卡住了。 Svg 剪辑路径完美运行。任何其他得到更好支持的解决方案都非常受欢迎
贴出三角形指向右边的代码
@MartinBA 背景：线性渐变（到右下角，透明 50%，#fff 0）右下角/10% 50% 不重复，线性渐变（到左下角，#fff 50 %,透明 0%) 右上角/10% 50% 不重复, url(s3.pagegear.co/1/contents/blog/2016/…) center/cover

标签： css linear-gradients

【解决方案1】：

如果您不需要支持 Edge，则可以使用 clip-path。这是迄今为止解决您的问题的最简单方法。您可以在CanIUse查看支持

另外，对此非常有用的工具是 Clippy，但不要忘记在 MDN - CSS clip-path 上阅读有关此技术的信息。

.foto {
  width: 100%;
  float: left;
  min-height: 215px;

  -webkit-clip-path: polygon(100% 0%, 85% 50%, 100% 100%, 0 100%, 0% 50%, 0 0);
  clip-path: polygon(100% 0%, 85% 50%, 100% 100%, 0 100%, 0% 50%, 0 0);
}
  /* first value is X, and second value is Y coordinate. Feel free to experiment with percentages according to your needs. */

解决方案 2：具有更好支持的旧“技巧” => CSS shapes.
您基本上需要创建一个新元素（这将是您的白色三角形），然后将其放在该图像的顶部。这是您需要的三角形的示例代码：

#triangle-left {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-right: 100px solid red; /* red is just for display puproses */
  border-bottom: 50px solid transparent;
}

&lt;div id="triangle-left"&gt;&lt;div&gt;

顺便说一句，您的 html 中有 background-image 和 img 标记。决定您要使用哪一个，如果您在裁剪图像时遇到问题，您可能需要查看背景位置和/或object-fit。

【讨论】：

【解决方案2】：

您可以像下面这样校正渐变。你几乎很好，只需将底部的放在顶部和顶部放在底部的位置切换即可：

.foto {
    min-height: 200px;
    background:
      linear-gradient(to bottom right,transparent 49.8%,#fff 50%) top right/10% 50%,
      linear-gradient(to top right,transparent 49.8%,#fff 50%) bottom right/10% 50%,
        url("https://s3.pagegear.co/1/contents/blog/2016/imagen_cachorro_comprimir.jpg") center/cover;
     background-repeat:no-repeat;
}

&lt;div class="foto bg_fix" &gt;&lt;/div&gt;

【讨论】：

是的，我也做到了，但解决方案没有响应
@HectorLandete 它怎么没有响应？因为它使用 % 值，所以它的响应速度非常好；)
@HectorLandete 它与您接受的解决方案具有相同的响应能力（剪辑路径而不是边框技巧，因为这个没有响应）