Question

说我有一个具有以下样式的圆圈：

angular

#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;
}

如何裁剪掉顶部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>

CSS剪辑路径圈

1 个答案: