CODEWITHSUNDEEP
css
Jason Ayer
Jason Ayer

Reputation: 597

Css clip path circle

Say I have a circle With the following style:

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

How do I clip away the top 145px so that it only shows the bottom 55px of the circle. I also want the text to appear towards the bottom of the clipped circle. Basically I want to create one of those fancy Edit Image buttons over a picture.

Upvotes: 0

Views: 1270

Answers (1)

Paulie_D
Paulie_D

Reputation: 115386

If you wish to use a clip path, I'd suggest a rectanglular one and border-radius on the element

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>

Upvotes: 1

Related Questions