How can I create a notch on the side of a div with absolute positioning?

Question

Im trying to achieve both of the effects pictured here. An inward notch on a div, and an outward arrow. The div has to have absolute positioning, so I'm not exactly sure how to do it. Also, the features have to be able to move up and down along the side of the div. The notch must be transparent. Is it possible to solve this with some CSS and HTML?

Answer 1

Heres is what you need. you can play with it according to your needs.

.a {
  width: 200px;
  height: 300px;
  background-color: gray;
  border: black 7px solid;
  border-radius: 50px;
  position: relative; 
}

div > div {
  width: 50px;
  height: 50px;
  position: absolute;
  transform: rotate(45deg)
}

.b {
  left: -30px;
  bottom: 40px;
  background-color: white;
  border-right: black 7px solid;
  border-top: black 7px solid;
  
}

.c {
  right: -33px;
   top: 40px;
   background-color: gray;
  border-top: black 7px solid;
   border-right: black 7px solid;
}

<div class='a'>
  <div class='b'></div>
    <div class='c'> </div>
  </div>