css - 三角形css内的图像？

Question

我想用这样的圆角实现自定义图像三角形css

我正在寻找如何实现这样的目标，但什么也没有，我想实现我css能做到这样的结果，有什么想法吗？抱歉，如果我的问题看起来像其他问题

谢谢

Answer 1

您可以使用clip-path。它允许您仅显示元素的一部分并隐藏其余部分，因此请制作一个具有足够点的多边形，以便在角落处实现圆角效果。

.tri {

    position: relative;
    width: 130px;
    height: 130px;
    background: url("http://pdphoto.org/images/tacos.jpg");

    clip-path: polygon(1% 78%, 46% 2%, 49% 0, 54% 0, 57% 2%, 98% 78%, 98% 83%, 95% 87%, 89% 88%, 6% 89%, 2% 87%, 0 83%);
  }

<div class="tri"></div>