diff --git a/zh-cn/application-dev/ui/Readme-CN.md b/zh-cn/application-dev/ui/Readme-CN.md
index 3f5b37ed3724242da6bad455798c414655d138cf..ab03e584a0d05488bc7c95874d2aad95019fdd21 100755
--- a/zh-cn/application-dev/ui/Readme-CN.md
+++ b/zh-cn/application-dev/ui/Readme-CN.md
@@ -145,6 +145,7 @@
      - [设置浮层 (OverlayManager)](arkts-create-overlaymanager.md)
   - 显示图形<!--arkts-draw-graphics-->
     - [绘制几何图形 (Shape)](arkts-geometric-shape-drawing.md)
+    - [形状裁剪 (clipShape)](arkts-clip-shape.md)
     - [使用画布绘制自定义图形 (Canvas)](arkts-drawing-customization-on-canvas.md)
   - 使用动画<!--arkts-use-animation-->
     - [动画概述](arkts-animation.md)
diff --git a/zh-cn/application-dev/ui/arkts-clip-shape.md b/zh-cn/application-dev/ui/arkts-clip-shape.md
new file mode 100644
index 0000000000000000000000000000000000000000..a244d0b517ab5c94c5e5e56abe5688edd6f86fb2
--- /dev/null
+++ b/zh-cn/application-dev/ui/arkts-clip-shape.md
@@ -0,0 +1,125 @@
+# 形状裁剪（clipShape）
+
+## 概述
+
+可利用[clipShape](../reference/apis-arkui/arkui-ts/ts-universal-attributes-sharp-clipping.md#clipshape12)接口将组件裁剪为自己想要的形状。调用该接口后，可以保留该形状覆盖的组件，同时消除组件的其他部分。裁剪形状本身是不可见的。
+
+> **说明：**  
+>
+> 不同的形状支持的属性范围不同，路径是一种形状，除此之外还有椭圆、矩形等形状。
+>
+> 路径的形状不支持设置宽度和高度。具体形状支持的属性参考具体形状的文档。
+>
+> 形状中的[fill](../reference/apis-arkui/js-apis-arkui-shape.md#fill)属性对clipShape接口不生效。
+
+## 裁剪圆形
+
+```ts
+// xxx.ets
+import { CircleShape } from '@kit.ArkUI';
+
+@Entry
+@Component
+struct ClipShapeExample {
+  build() {
+    Column({ space: 15 }) {
+      Text('clipShape').fontSize(12).width('75%').fontColor(Color.Black)
+
+      // 用一个280px直径的圆对图片进行裁剪
+      Image($r('app.media.background'))
+        .clipShape(new CircleShape({ width: '280px', height: '280px' }))
+        .width('500px').height('280px')
+
+      // 用一个350px直径的圆对图片进行裁剪
+      Image($r('app.media.background'))
+        .clipShape(new CircleShape({ width: '350px', height: '350px' }))
+        .width('500px').height('370px')
+    }
+    .width('100%')
+    .margin({ top: 15 })
+  }
+}
+```
+
+![zh-cn_image_clip_rotundity](figures/zh-cn_image_clip_rotundity.png)
+
+## 裁剪椭圆形
+
+```ts
+// xxx.ets
+import { EllipseShape } from '@kit.ArkUI';
+
+@Entry
+@Component
+struct ClipShapeExample {
+  build() {
+    Column({ space: 15 }) {
+      Image($r('app.media.background'))
+        .clipShape(new EllipseShape({ width: '280px', height: '200px' }))
+        .width('500px').height('400px')
+
+      Image($r('app.media.background'))
+        .clipShape(new EllipseShape({ width: '380px', height: '280px' }))
+        .width('500px').height('400px')
+    }
+    .width('100%')
+    .margin({ top: 15 })
+  }
+}
+```
+
+![zh-cn_image_clipl_elliptical](figures/zh-cn_image_clipl_elliptical.png)
+
+## 裁剪矩形
+
+```ts
+// xxx.ets
+import { RectShape } from '@kit.ArkUI';
+
+@Entry
+@Component
+struct ClipShapeExample {
+  build() {
+    Column({ space: 15 }) {
+      Image($r('app.media.background'))
+        .clipShape(new RectShape({ width: '200px', height: '200px' }))
+        .width('500px').height('400px')
+
+      Image($r('app.media.background'))
+        .clipShape(new RectShape({ width: '380px', height: '280px' }))
+        .width('500px').height('400px')
+    }
+    .width('100%')
+    .margin({ top: 15 })
+  }
+}
+```
+
+![zh-cn_image_clipl_rectangle](figures/zh-cn_image_clipl_rectangle.png)
+
+## 裁剪不规则形状
+
+```ts
+// xxx.ets
+import { PathShape } from '@kit.ArkUI';
+
+@Entry
+@Component
+struct ClipShapeExample {
+  build() {
+    Column({ space: 15 }) {
+      Row() {
+        Image($r('app.media.background'))
+          .clipShape(new PathShape({ commands: 'M0 0 H400 V200 H0 Z' }))
+          .width('500px').height('300px')
+      }
+      .clip(true)
+      .borderRadius(20)
+    }
+    .width('100%')
+    .margin({ top: 15 })
+  }
+}
+```
+
+![zh-cn_image_clip_Irregular_shapes](figures/zh-cn_image_clip_Irregular_shapes.png)
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_clip_Irregular_shapes.png b/zh-cn/application-dev/ui/figures/zh-cn_image_clip_Irregular_shapes.png
new file mode 100644
index 0000000000000000000000000000000000000000..e641ace79e61d0f7b6edb2f00dc29943afb5f422
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_clip_Irregular_shapes.png differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_clip_rotundity.png b/zh-cn/application-dev/ui/figures/zh-cn_image_clip_rotundity.png
new file mode 100644
index 0000000000000000000000000000000000000000..620f947b0c1ead5db0b1c4e2c57007a5a98fc337
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_clip_rotundity.png differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_clipl_elliptical.png b/zh-cn/application-dev/ui/figures/zh-cn_image_clipl_elliptical.png
new file mode 100644
index 0000000000000000000000000000000000000000..f75729253901451acd1fac0a6bcb87c1c8ed6d86
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_clipl_elliptical.png differ
diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_clipl_rectangle.png b/zh-cn/application-dev/ui/figures/zh-cn_image_clipl_rectangle.png
new file mode 100644
index 0000000000000000000000000000000000000000..c5054128f265c8b51643e74d8233e8c8559ef5d1
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_clipl_rectangle.png differ