How To Make A Hole Area In The Bottom Corner Of The Overlay Css
I tried to make a hole area in the bottom corner of the overlay like in the image below, but still having trouble. here is an example of the code
;
width: 100px;
height: 100px;
border-radius: 50%;
border: 5px solid yellow;
background-color: #fff;
bottom: -50px;
left: 50px;
color: #777;
font-size: 16px;
}
<div class='container'>
<span class='round'>UPLOAD</span>
</div>EDIT
Added text inside the round
Solution 2:
You can use CSS mask to cut a hole in an element with a radial-gradient as the mask image. You can put the yellow border around the hole with a background radial gradient at the same place.
This snippet has a container background of magenta so you can see that a genuine 'hole' is cut with whatever is below being shown (though the background radial gradient will cover it with a transparent layer).
Note: view the snippet in Full page
.container {
background-color: magenta;
display: inline-block;
width: 100vw;
height: 100vh;
}
.div {
-webkit-mask: radial-gradient(circle at 50px 100%, transparent 0, transparent 50px, black 50px, black 100%);
mask: radial-gradient(circle at 50px 100%, transparent 0, transparent 50px, black 50px, black 100%);
background-color: skyblue;
background-image: radial-gradient(circle at 50px 100%, transparent 0, transparent 50px, yellow 50px, yellow 53px, transparent 53px, transparent 100%);
width: 100%;
height: 300px;
margin: 0;
padding: 0;
}<div class="container">
<div class="div"></div>
</div>
Post a Comment for "How To Make A Hole Area In The Bottom Corner Of The Overlay Css"