Css 剪辑路径圆

Question

假设我有一个具有以下样式的圆圈:

#edit-user-img {
  clip-path: circle(100px at center);
  background-color: rgba(0, 0, 0, 0.55);
  color: white;
  text-align: center;
  z-index: 1;
  top: 0;
  display: block;
  overflow: hidden;
  width: 200px;
  height: 200px;
  position: absolute;
}

<a id="edit-user-img" href="#">
  <i class="fa fa-pencil" aria-hidden="true"></i> Edit Picture
</a>

如何剪掉顶部的 145 像素，使其只显示圆的底部 55 像素。我还希望文本出现在裁剪圆的底部。基本上，我想在图片上创建一个精美的“编辑图像”按钮。

Answer 1

如果你想使用剪辑路径，我建议在元素上使用矩形和 border-radius

div {
  clip-path: polygon(0% 72.5%, 0 100%, 100% 100%, 100% 72.5%);
  background-color: rgba(0, 0, 0, 0.55);
  color: white;
  text-align: center;
  z-index: 1;
  top: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  width: 200px;
  height: 200px;
  border-radius: 50%;
}

span {
  margin-bottom: 12%;
}

<div>
  <span> Edit Picture</span>
</div>