CSS中clip-path容器内绝对定位圆形超出部分被隐藏如何解决

我尝试在frame容器的角落放置一个圆形，就像示例图一样，但目前只有圆形处于frame内部的部分可见，我标注x的区域是不可见的。

当前效果 #

预期效果 #

现有代码 #

CSS #

.circle{ 
  height: 150px; 
  width: 150px; 
  border-radius: 50%; 
  background: black; 
  line-height: 0; 
  position: absolute; 
  right:-20px; 
  top:-2px; 
  z-index: 2;
} 
.circle:after { 
  content: ""; 
  display: block; 
  padding-bottom: 100%; 
  position: relative; 
} 
.circle-txt { 
  /* (E1) CENTER TEXT IN CIRCLE */
  position: absolute; 
  bottom: 50%; 
  width: 100%; 
  text-align: center; 
  /* (E2) THE FONT - NOT REALLY IMPORTANT */
  font-family: "font"; 
  font-size:inherit; 
} 
:root{ 
  --pic:"M510.295 108.139C571.169 177.774 609.697 279.36 589.662 365.38C570.398 451.399 492.572 521.854 409.352 555.443C326.132 589.031 236.748 586.574 162.775 548.889C88.8013 511.204 30.2391 438.292 8.66355 353.91C-12.1414 268.71 4.81077 171.22 56.438 104.043C107.295 36.8656 193.597 0 278.358 0C363.89 0.819237 448.651 38.5041 510.295 108.139Z" 
} 
.frame{ 
  padding-right: 1px; 
  height: 579px; 
  width: 595px; 
  clip-path: path(var(--pic)); 
  margin-left: 8%; 
  margin-bottom: 5%; 
  position: relative; 
  z-index: 1; 
} 
img{ 
  height: 579px; 
  width: 595px;
}

HTML #

<div class="frame"> 
  <img src="1.png"> 
  <div class="circle"> 
    <div class="circle-txt">فریلنسینگ چیست؟</div> 
  </div>
</div>

问题原因 #

你给.frame设置了clip-path属性，该属性会对容器本身以及它的所有子元素进行区域裁剪，只有落在定义的path路径范围内的内容才会被渲染显示，因此圆形超出path范围的部分就被隐藏了。

修复方案 #

调整DOM结构，将圆形元素从frame容器内移出，在外层新增一个相对定位的父容器包裹frame和圆形，这样圆形的定位不受frame的clip-path影响，即可完整显示。

调整后HTML #

<div class="frame-wrapper">
  <div class="frame">
    <img src="1.png">
  </div>
  <div class="circle">
    <div class="circle-txt">فریلنسینگ چیست؟</div>
  </div>
</div>

调整后CSS补充 #

/* 新增外层容器样式 */
.frame-wrapper {
  position: relative;
  width: fit-content;
  margin-left: 8%;
  margin-bottom: 5%;
}
/* 调整原有frame样式，移除已迁移到外层的属性 */
.frame{
  padding-right: 1px;
  height: 579px;
  width: 595px;
  clip-path: path(var(--pic));
  /* 删除原有的margin-left、margin-bottom、position: relative、z-index属性 */
}

其余原有CSS无需修改，即可实现预期效果。

内容的提问来源于stack exchange，提问作者pardis.ti