css - 三 Angular 形CSS内的图像？

Question

我想使用 css 实现一个像这样的带有圆 Angular 的自定义图像三 Angular 形

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

谢谢

Answer 1

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

.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>