要保持clip-path多边形的形状并添加孔效果，可以使用CSS中的伪元素和背景图像来实现。以下是一个示例代码：

HTML:

CSS:

.shape {
  width: 200px;
  height: 200px;
  position: relative;
  background: url('path-to-your-image.jpg') center center no-repeat;
  background-size: cover;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.shape::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  background-color: white;
  border-radius: 50%;
}

解释：

1. 首先，我们创建一个具有指定宽度和高度的div元素，并将其位置设置为相对定位。
2. 我们使用background属性将背景图像设置为div的背景，并使用center center no-repeat和cover属性来调整背景图像的位置和大小。
3. 我们使用clip-path属性将div裁剪为一个多边形形状。在这个示例中，我们使用polygon函数定义了一个三角形形状，可以根据需要调整坐标值。
4. 我们使用::after伪元素来创建一个白色的圆形孔效果。我们将其内容设置为空字符串，并使用绝对定位将其放置在div元素的中心位置。使用transform属性将其位置居中。
5. 最后，我们通过设置它的宽度和高度以及border-radius属性来定义圆形孔效果的大小和形状。

请注意，上述代码中的"path-to-your-image.jpg"应替换为实际的背景图像路径。