<div class="container">
  <div class="block block--left">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Enim deleniti mollitia minus similique exercitationem impedit ipsam aut itaque nesciunt asperiores ad alias, autem assumenda quo officia eos odio inventore vel.</div>
  <div class="block block--mid">
    <button class="btn">X</button>
  </div>
  <div class="block block--right">Enim deleniti mollitia minus similique exercitationem impedit ipsam aut itaque nesciunt asperiores ad alias, autem assumenda quo officia eos odio inventore vel.</div>
</div>

* {
  box-sizing: border-box;
}

body {
  margin: 20px;
  background:
    linear-gradient(to right, #0001 1px, transparent 1px) 0 0 / 8px 8px,
    linear-gradient(to bottom, #0001 1px, transparent 1px) 0 0 / 8px 8px;
  font-family: sans-serif;
  line-height: 1.35;
}

.container {
  width: 90%;
  margin: 0 auto;
  display: flex;
}

$hole-radius: 30px;
$blocks-distance: 20px;
$border-width: 2px;
$stroke-color: #f44336;
$fill-color: #4caf50;

.block--mid {
  position: relative;
  width: $blocks-distance;
  z-index: 1;
}

.btn {
  $size: 0.8;
  position: absolute;
  border: none;
  margin: 0;
  padding: 0;
  background: #3f51b5;
  color: #fff;
  width: $hole-radius * 2 * $size;
  height: $hole-radius * 2 * $size;
  top: calc(50% - #{$hole-radius * 2 * $size / 2});
  left: calc(50% - #{$hole-radius * 2 * $size / 2});
  border-radius: 50%;
}

.block--left, .block--right {
  flex: 1;
  border-radius: 20px;
  padding: 25px;
  border: $border-width solid transparent;
  color: #fff;
  filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.75));
}

.block--left {
  background:
    radial-gradient(
      circle at calc(100% + #{$blocks-distance / 2}) 50%,
        transparent $hole-radius + $border-width,
        $fill-color $hole-radius + $border-width + 1px
      ) border-box padding-box,
    radial-gradient(
        circle at calc(100% + #{$blocks-distance / 2}) 50%,
        transparent $hole-radius,
        $stroke-color $hole-radius + 1px
      ) border-box border-box;
}

.block--right {
  background:
    radial-gradient(
      circle at calc(0% - #{$blocks-distance / 2}) 50%,
        transparent $hole-radius + $border-width,
        $fill-color $hole-radius + $border-width + 1px
      ) border-box padding-box,
    radial-gradient(
        circle at calc(0% - #{$blocks-distance / 2}) 50%,
        transparent $hole-radius,
        $stroke-color $hole-radius + 1px
      ) border-box border-box;
}