Reputation: 597
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
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