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

.container {
  width: 100%;
  height: 300px;
  position: relative;
  background-color: blue;
}

.round {
  position: absolute;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  content: '';
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 5px solid yellow;
  background-color: #fff;
  bottom: -50px;
  left: 50px;
  color: #777;
  font-size: 16px;
}

<divclass='container'><spanclass='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 50px100%, transparent 0, transparent 50px, black 50px, black 100%);
  mask: radial-gradient(circle at 50px100%, transparent 0, transparent 50px, black 50px, black 100%);
  background-color: skyblue;
  background-image: radial-gradient(circle at 50px100%, transparent 0, transparent 50px, yellow 50px, yellow 53px, transparent 53px, transparent 100%);
  width: 100%;
  height: 300px;
  margin: 0;
  padding: 0;
}

<divclass="container"><divclass="div"></div></div>

Share