三角形css里面的图像？

Question

我希望使用css

来实现具有圆角的自定义图像三角形形状

我正在寻找如何实现这样但没有， 我希望实现我的css可以做到这样的结果，任何想法？ 对不起，如果我的问题看起来像其他问题

由于

Answer 1

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

＆＃13;

＆＃13;

.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%);
  }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;