How i can create edge hole rectangle in css

Question

how can i insert hole near rectangle edge? can you guide me ? how I can do this! Thanks in advance!

Please show us the code yu have so far. And do you want it to be a 'real' hole, that is, with whatever is behind showing? — A Haworth, Aug 11 '21 at 20:33
If you want it to be a genuine hole (that can be seen through to show the stuff underneath) use CSS mask - see [link]https://stackoverflow.com/questions/68645705/how-to-make-a-hole-area-in-the-bottom-corner-of-the-overlay-css/68647927#68647927 — A Haworth, Aug 12 '21 at 07:08

score 0 · Answer 1 · answered Aug 11 '21 at 20:38

You can try to use both pseudoelements: after and before to place a circle where you want with border and white backound color and then a square above to "hide" with the same background color half of the circle.

Like this:

div {
  height:200px;
  border:3px solid #000;
  position:relative;
  margin-left:20px;
}
div:before {
  content:'';
  display:block;
  height:26px;
  width:26px;
  border:3px solid #000;
  background-color:#fff;
  position:absolute;
  left:-17px;
  top:80px;
  border-radius:50%;
}
div:after {
  content:'';
  display:block;
  height:100px;
  width:20px;
  background-color:#fff;
  position:absolute;
  left:-23px;
  top:50px;
}

<div>  
</div>

This isn’t going to work with a non-solid background, or a background whose color may change. — Terry, Aug 11 '21 at 20:46

How i can create edge hole rectangle in css

1 Answers1