Как сделать вырез в блоке такой же как в макете?

Question

[Gracie ST]

Как у элемента li сделать такое же отверстие внутри блока как на фотографии?

Ссылка на CodePen: https://codepen.io/websurfers/pen/vYvmwjO

Answer 1

[szQocks]

демо

<div>
  <span>123</span>
  <p>Какой-то текст</p>
</div>

body{
  background: gray;
}

div{
  margin: 50px auto;
  width: 200px;
  height: 140px;
  background: radial-gradient(40px 40px at center top, transparent 100%, red 100%);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  border-radius: 20px;
}

span{
  width: 65px;
  height: 65px;
  border-radius: 50%;
  color: firebrick;
  background: aqua;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: -32px;
}

Comments

[Gracie ST]

спасибо!

[Вадим]

Gracie ST, если считаете ответ решением - стоит его таковым отметить. Это приятно отвечающему и экономит время всем остальным.