Как сделать такой вырез треугольника как на макете, чтобы была такая же обводка и видно было изображение

body { margin: 0; display: flex; justify-content: space-around; align-items: center; min-height: 100vh; }

.service {
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
  align-items: center;
  width: 340px;
}

.service>img {
  width: 310px; height: 190px;
  object-fit: auto; border-radius: 15px;
}
.service>div {
  box-sizing: border-box; border-radius: 15px;
  width: 100%; padding: 65px 25px 45px;
  transform: translatey(-20px);
  background-image: linear-gradient(25deg, #fff 78%, transparent 78.1%), linear-gradient(-25deg, #fff 78%, transparent 78.1%);
  filter: drop-shadow(0 0 1px #aaa8) drop-shadow(0 0 1px #aaa8) drop-shadow(-3px -3px 0px #fff) drop-shadow(0px -3px 0px #fff) drop-shadow(3px -3px 0px #fff) drop-shadow(3px 0px 0px #fff) drop-shadow(3px 3px 0px #fff) drop-shadow(0px 3px 0px #fff) drop-shadow(-3px 3px 0px #fff) drop-shadow(-3px 0px 0px #fff) drop-shadow(0px 10px 10px #0003);
}

.service ul { width: 100%; margin: 65px 0 0; }
.service li { font: normal 16px/1em sans-serif; margin: 0.5em 0; }

.service>div>div { text-align: center; }
.service h2 { font: bold 28px/1em serif; margin: 0; }
.service h3 { font: normal 18px/1em sans-serif; margin: 0; }

<div class="service">
  <img src="https://i.stack.imgur.com/m9kuJ.jpg" alt="">
  <div>
    <div>
      <h2>Поклейка</h2>
      <h3>всех видов обоев</h3>
    </div>
    <ul>
      <li>Выезд замерщика</li>
      <li>Устранение дефектов</li>
      <li>Поклейка обоев</li>
      <li>Вынос мусора</li>
    </ul>
  </div>
</div>