能否使用Clip Path裁剪圆形图像顶部？技术实现咨询

当然可以用clip-path实现这种顶部被裁剪的圆形效果，你可以通过clip-path: path()函数结合SVG路径语法来定义这个带顶部切口的形状，替换原来的border-radius即可。

实现代码 #

CSS代码：

.circle {
  width: 75px;
  height: 75px;
  background-color: red;
  /* 顶部裁剪10px的圆形，路径含义：从左上角(0,10)画直线到右上角(75,10)，再通过下半圆弧回到起点 */
  clip-path: path('M0 10 L75 10 A37.5 37.5 0 1 1 0 10 Z');
}

HTML代码：

<div class="circle"></div>

灵活调整裁剪高度 #

如果你想按比例裁剪（适配不同尺寸的元素），可以把固定像素值换成百分比：

.circle {
  width: 75px;
  height: 75px;
  background-color: red;
  /* 顶部裁剪15%高度的圆形 */
  clip-path: path('M0 15% L100% 15% A50% 50% 0 1 1 0 15% Z');
}

说明 #

• path()里的SVG路径语法：M表示移动到起点，L表示画直线，A表示画椭圆弧（这里用的是正圆，所以两个半径都是元素尺寸的一半），Z表示闭合路径。
• 现代浏览器（Chrome、Firefox、Edge等）都支持clip-path: path()，如果需要兼容更旧的浏览器，可以使用内嵌SVG的<clipPath>元素配合使用。

内容的提问来源于stack exchange，提问作者hkacan