纯CSS实现各种不规则图形

1、HTML

<div class="photo">
    <img src=""/>
</div>

2、CSS

photo {
  width: 200px;
  height: 200px;
  background: #6c00af;
  -webkit-clip-path: polygon(
    28% 6%,
    71% 15%,
    100% 75%,
    18% 39%,
    63% 27%,
    16% 22%,
    65% 19%
  );
  clip-path: polygon(
    28% 6%,
    71% 15%,
    100% 75%,
    18% 39%,
    63% 27%,
    16% 22%,
    65% 19%
  );
}

3、计算工具

CSS Clip-Path生成器:https://tool.ntan520.com/tool/clippy/clippy.html

发表评论