白色CSS内箭头div

Question

我正在寻找使用 HTML 创建图像内部的白色箭头，您可以在代码段中以纯粹的 CSS 方式找到它，而不是编辑任何 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
}

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

Answer 1

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

上查看支持情况

此外，对此非常有用的工具是 Clippy, but don't forget to read about this technique on 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：旧 "trick" 有更好的支持 => 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;
}

<div id="triangle-left"><div>

顺便说一句，您的 html 中同时包含 background-image 和 img 标签。决定要使用哪一个，如果裁剪图像有问题，您可能需要查看背景位置 and/or object-fit.

Answer 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;
}

<div class="foto bg_fix" ></div>

白色CSS内箭头div

White CSS arrow inside div

css

linear-gradients