如何在具有绝对定位的 div 的一侧创建一个缺口？

Question

我正在努力实现图中的两种效果 here。 div 上的一个向内凹口和一个向外的箭头。 div 必须有绝对定位，所以我不确定该怎么做。此外，特征必须能够沿着 div 的一侧上下移动。缺口必须是透明的。有没有可能用一些 CSS 和 HTML 来解决这个问题？

Answer 1

这是您需要的。大家可以根据自己的需要来玩

.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>

如何在具有绝对定位的 div 的一侧创建一个缺口？

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

html

css

styling

absolute