Верстка изогнутого блока

.wrapper { 
  width: 200px; 
  height: 20px; 
  background-color: gray; 
  margin: 20px auto; 
  border-radius: 10px; 
  position: relative; 
} 
 
.dot { 
  position: absolute; 
  width: 17px; 
  height: 20px; 
  background-color: black; 
  border-radius: 50%; 
} 
 
.dot.right { 
  top: 0; 
  right: 0; 
} 
 
.lorem { 
  position: absolute; 
  width: 280px; 
  height: 150px; 
  background: linear-gradient(to right, white, silver); 
  top: 10px; 
  left: -40px; 
  box-shadow: 0 0 2px silver; 
  border-radius: 5px; 
  text-align: center; 
  font-size: 40px; 
  padding-top: 120px; 
} 
 
.step { 
  position: absolute; 
  width: 166px; 
  height: 60px; 
  background-color: gray; 
  top: 0; 
  left: 17px; 
  color: white; 
  text-align: center; 
  font-size: 36px; 
  font-weight: bold; 
  padding-top: 30px; 
} 
 
.romb { 
  position: absolute; 
  left: 63px; 
  top: 53px; 
  width: 74px; 
  height: 74px; 
  background-color: gray; 
  transform: rotate(-45deg) skew(30deg, 30deg); 
}

<div class="wrapper"> 
  <div class="dot left"></div> 
  <div class="dot right"></div> 
  <div class="lorem">Lorem ipsum dolor sit amet</div> 
  <div class="step">ШАГ 1</div> 
  <div class="romb"></div> 
</div>

:root { 
  --sizeFillets: 20px; 
  --widthLabel: 200px; 
  --heightLabel: 150px; 
  --colorLabel: grey; 
  --colorShadow: black; 
} 
 
body { 
  display: flex; 
  min-height: 100vh; 
  padding: 0; 
  margin: 0; 
} 
 
div { 
  margin: auto; 
  width: var(--widthLabel); 
  height: var(--heightLabel); 
  background-color: var(--colorLabel); 
  position: relative; 
} 
 
div::after { 
  content: ''; 
  position: absolute; 
  top: 100%; 
  left: 0; 
  display: block; 
  width: 100%; 
  height: 0; 
  box-sizing: border-box; 
  border-style: solid; 
  border-color: transparent; 
  border-width: var(--sizeFillets) calc(var(--widthLabel)/2) 0 calc(var(--widthLabel)/2); 
  border-top-color: var(--colorLabel); 
} 
 
span { 
  position: relative; 
  display: block; 
  left: calc(var(--sizeFillets)/-2); 
  top: calc(var(--sizeFillets)/-2); 
  width: calc(100% + var(--sizeFillets)); 
  height: calc(var(--sizeFillets)/2); 
  background-color: var(--colorLabel); 
} 
 
span::after, 
span::before { 
  content: ''; 
  position: absolute; 
  left: calc(var(--sizeFillets)/-2); 
  width: var(--sizeFillets); 
  height: calc(var(--sizeFillets)/2); 
  border-radius: var(--sizeFillets) var(--sizeFillets) 0 0; 
  background-color: var(--colorShadow); 
} 
 
span::after { 
  left: calc(100% + var(--sizeFillets)/-2); 
}

<div> 
  <span></span> 
</div>

body { 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  padding: 1rem; 
  font-size: 1.5rem; 
  font-family: sans-serif; 
  line-height: 1.5; 
} 
.badge { 
  background: linear-gradient(to right, white, silver); 
  padding: 5rem 1rem 1rem; 
  border: 1px solid lightgray; 
  border-radius: 5px; 
  position: relative; 
  z-index: 50; 
} 
/* Левый и правый изгибы */ 
.badge:before, 
.badge:after { 
  content: ''; 
  width: 17px; 
  height: 10px; 
  position: absolute; 
  top: -10px; 
  background: #000; 
  border-top-right-radius: 10px; 
  border-top-left-radius: 10px; 
} 
/* Позиция левого изгиба */ 
.badge:before { 
  left: 48px; 
} 
/* Позиция правого изгиба */ 
.badge:after { 
  right: 48px; 
} 
.badge__flag { 
  background: gray; 
  position: absolute; 
  top: 0; 
  margin: auto 4rem; 
  left: 0; 
  right: 0; 
  display: flex; 
  justify-content: center; 
  color: #eee; 
  padding: 1rem; 
} 
/* Нижняя и верхняя части стрелки */ 
.badge__flag:before, 
.badge__flag:after { 
  content: ''; 
  position: absolute; 
} 
/* Верхняя часть стрелки */ 
.badge__flag:before { 
  top: -10px; 
  left: -5%; 
  width: 110%; 
  height: 10px; 
  background: gray; 
  z-index: -5; 
} 
/* Нижняя часть стрелки */ 
.badge__flag:after { 
  bottom: -15px; 
  left: 0; 
  width: 0; 
  height: 0; 
  border-top: 15px solid gray; 
  border-left: 94px solid transparent; 
  border-right: 100px solid transparent; 
}

<div class="badge"> 
  <p class="badge__flag">Шаг 1</p> 
  <p class="badge__copy"> 
    Lorem ipsum dolor sit amet 
  </p> 
</div>