纯CSS实现各种不规则图形

CSS, Web设计 / 作者： / / 发表评论 / CSS, DIV, img, 不规则, 不规则图形

1、HTML

1
2
3
<div class="photo">
    <img src=""/>
</div>

2、CSS

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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

打赏微海报分享

相关文章

发表评论

欢迎阅读『纯CSS实现各种不规则图形|CSS、Web设计|Nick Tan-梓潼Blog』