时间戳

首页 > 解决方案 > css剪辑路径圆

css - css剪辑路径圆

问题描述

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

#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 像素。我还希望文本出现在剪裁圆的底部。基本上我想在图片上创建一个花哨的编辑图像按钮。

标签： css

解决方案

如果您想使用剪辑路径，我建议您使用矩形路径并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>

推荐阅读