使用CSS形状做不规则布局。

用 CSS 做不规则布局，核心就三样东西：`shape-outside` 负责让文字沿着形状绕排，`clip-path` 负责把方块裁成任意形状，Grid 显式定位负责把盒子摆到错落的位置。这三者配合，不依赖图片切片也不需要 SVG，就能做出圆形头像环绕、斜切卡片、错位网格这类效果。

先分清三套工具各管什么

结论：`shape-outside` 管文字怎么绕，`clip-path` 管盒子长什么样，Grid 管盒子摆在哪，搞混它们是最常见的翻车原因。

`shape-outside` 是「形状外边界」属性，作用是让相邻的行内内容沿着你定义的形状流动。它只对浮动元素（float）生效，一个元素没有 float，写了 `shape-outside` 等于没写。

`clip-path` 是裁剪属性，把元素的可见区域裁成圆形、椭圆、多边形或路径。关键点：它只改「看得见的部分」，不改盒子在布局中的占位，元素仍按原来的矩形参与排版，被裁掉的区域还可能压住旁边的元素。

Grid 的显式定位（`grid-column`、`grid-row`、`grid-template-areas`）才是真正改变布局占位的工具。想让卡片错落咬合，靠的是它，而不是 clip-path。

图文环绕：float + shape-outside 的最小可用写法

结论：给浮动元素加上与 clip-path 一致的 `shape-outside`，就能让文字贴着不规则边缘走。

.avatar{
  float: left;
  width: 220px;
  height: 220px;
  margin: 0 16px 8px 0;
  shape-outside: circle(50% at 50% 50%);
  clip-path: circle(50% at 50% 50%);
}

几个必须注意的点：

• `shape-outside` 的参考盒是 margin box（外边距盒），所以 margin 会参与形状计算，想调文字与形状的距离，用 `shape-margin` 更直观。
• 用图片当形状时写 `shape-outside: url(mask.png)`，只有图片的 alpha 通道不透明部分才构成形状，透明区域文字可以流进去。跨域图片会失效，把图放到自己域名下。
• 斜切排版用 `polygon()`，括号里是顺时针的坐标点，写成百分比。

clip-path 做不规则卡片与斜切

结论：`clip-path: polygon()` 是做出「不是矩形」卡片最省事的方案，配合 `filter: drop-shadow()` 还能让投影跟着形状走。

.card{
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 32px), 0 100%);
  filter: drop-shadow(0 8px 20px rgba(0,0,0,.12));
  transition: clip-path .3s ease;
}
.card:hover{
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 32px));
}

注意点有三条。第一，常规的 `box-shadow` 会被裁掉，因为它是按矩形盒子画的，必须换 `filter: drop-shadow()`。第二，裁剪区域会影响点击与 hover 判定，被裁掉的部分不响应鼠标事件，做交互热区时要留意。第三，形状过渡要平滑，前后两个 `polygon()` 的点数必须相同，否则浏览器只能硬切。

真正错落：Grid 显式定位加负边距

结论：想做出杂志式的错位咬合，用 Grid 显式定位比 float 可靠得多。

.masonry{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
}
.masonry > :nth-child(4n+1){ grid-column: span 3; }
.masonry > :nth-child(4n+2){ grid-column: span 3; margin-top: 48px; }
.masonry > :nth-child(4n+3){ grid-column: span 2; }

`grid-template-areas` 更适合「一眼看懂」的版式，直接画 ASCII 地图：把每行写成 `"head head side"` 这样的字符串，区域名重复即合并。移动端用媒体查询换成单列即可，不用重写结构。

兼容与可读性：两道保险

结论：所有形状效果都要用 `@supports` 做降级，并且优先保证文字不被裁掉。

@supports not (clip-path: polygon(0 0, 1px 1px, 0 1px)){
  .card{ border-radius: 12px; }
}

`clip-path` 与 `shape-outside` 在主流现代浏览器均已支持，但裁剪后文字被切、行长被挤到过窄导致阅读困难，是实际项目里更常见的坑。不规则布局是视觉加分项，不是把正文塞进窄缝的理由，长文区域老老实实保持规则矩形。

性能上，动画优先用 `clip-path` 和 `transform`，它们不触发重排；避免对 `width`、`top` 这类属性做形状补间。

把这几条串起来：文字环绕用 float + shape-outside，外观切割用 clip-path，位置排布交给 Grid，投影用 drop-shadow，降级用 @supports。四件事各归各位，不规则布局就是可控的工程问题，而不是碰运气的玄学。在支持 Markdown 轻语法的社区里发这类教程，把代码块直接贴出来，读者复制就能看到效果。