<div class="modal">
  <div class="modal__container">
    <div class="modal__content">
      <div class="modal__header"></div>
      <div class="modal__body">
        <div class="modal__body--content">
          <h2>Modal Heading</h2>
        </div>
        <div class="pipe pipe__left">
          <div class="line line--1"></div>
          <div class="line line--2"></div>
        </div>
        <div class="pipe pipe__right">
          <div class="line line--1"></div>
          <div class="line line--2"></div>
          <div class="circle"></div>
          <div class="circle2"></div>
        </div>
        <div class="pipe__bottom"></div>
        <div class="pipe__imgage pipe__imgage--left"></div>
        <div class="pipe__imgage pipe__imgage--right"></div>
      </div>
      <div class="modal__footer"></div>
    </div>
  </div>
</div>
<div class="modal__overlayer"></div>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  min-height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

body {
  background-image: linear-gradient(to bottom, #f90, #09f);
}

.modal__overlayer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 2;
  width: 100vw;
  min-height: 100vh;
}

.modal {
  /*   position: fixed; */
  width: 100vw;
  min-height: 100vh;
  /*   top: 0;
  right: 0;
  bottom: 0;
  left: 0;
*/
  z-index: 3;

  display: flex;
  justify-content: center;
  align-items: center;
}

.modal__container {
  width: 750px;
  min-height: 940px;
  display: flex;
  justify-content: center;
  align-items: center;

  background: url(https://img.alicdn.com/tfs/TB1xaQ1pqNj0u4jSZFyXXXgMVXa-750-940.png)
    no-repeat left top;
  background-size: 750px 940px;
}

.modal__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
}

.modal__header {
  display: flex;
  justify-content: center;
  align-items: center;
  background: url(https://img.alicdn.com/tfs/TB171IrZLb2gK0jSZK9XXaEgFXa-719-216.png)
    no-repeat left top;
  background-size: 719px 216px;
  width: 719px;
  min-height: 216px;
  position: relative;
  z-index: 2;
  margin-bottom: -109px;
}

.modal__body {
  width: 550px;
  min-height: 697px;
  border-radius: 34px;
  border: 10px solid transparent;
  background-image: linear-gradient(to bottom, #fff4f8 1%, #ffd5dc 77%),
    linear-gradient(to bottom, #ff0a53, #ff7860);
  background-repeat: no-repeat;
  background-origin: border-box;
  background-clip: padding-box, border-box;
  position: relative;
  z-index: 1;
  padding: 20px;
}

.pipe {
  position: absolute;
  z-index: 4;
  width: 18px;
  top: 0px;
  bottom: 30px;
  mix-blend-mode: color-dodge;
  border: 1px solid transparent;
  background-image: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.85),
      rgba(0, 0, 0, 0.85)
    ),
    radial-gradient(
      ellipse at 0% 100%,
      #ff3b3b 0%,
      rgba(255, 126, 126, 0.96) 30%,
      rgba(255, 143, 143, 0.42)
    ),
    radial-gradient(
      ellipse at 100% 0%,
      #ff8e20 0%,
      rgba(255, 255, 255, 0.96) 30%,
      rgba(255, 255, 255, 0.25)
    );
  background-repeat: no-repeat;
  background-origin: border-box;
  background-clip: padding-box, border-box, border-box;
  box-shadow: inset -6px 0 7px 0 rgba(218, 112, 255, 0.5),
    inset 6px 0 7px 0 rgba(255, 24, 24, 0.5);
}

.pipe::before,
.pipe::after {
  content: "";
  position: absolute;
}

.pipe__left {
  left: -18px;
  transform: scaleX(-1);
}

.pipe__right {
  right: -18px;
}
.pipe::before {
  opacity: 0.23;
  transform: scaleX(-1) scaleY(-1);
  background-image: linear-gradient(
    180deg,
    #ff1e74 0%,
    rgba(255, 255, 255, 0) 100%
  );
  width: 8px;
  bottom: 0;
  top: 184px;
  left: 0;
  z-index: 5;
}

.pipe::after {
  width: 3px;
  right: 4px;
  top: 0;
  bottom: 260px;
  background-image: linear-gradient(
    180deg,
    #ffffff 30%,
    rgba(255, 255, 255, 0) 100%
  );
  z-index: 4;
}

.pipe__right .circle {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffa601;
  position: absolute;
  bottom: 16px;
  left: 1px;
  right: 1px;
  z-index: 8;
}

.pipe__right .circle2 {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ffa601;
  position: absolute;
  top: 74px;
  left: 2px;
  right: 2px;
  z-index: 8;
}

.pipe__bottom {
  position: absolute;
  left: 40px;
  right: 40px;
  bottom: -10px;
  height: 16px;
  /* transform: rotate(-270deg); */
  border: 1px solid transparent;
  background-image: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),
    radial-gradient(
      ellipse at 0% 100%,
      #ff3b3b 0%,
      rgba(255, 126, 126, 0.96) 30%,
      rgba(255, 143, 143, 0.42)
    ),
    radial-gradient(
      ellipse at 100% 0%,
      #ff8e20 0%,
      rgba(255, 255, 255, 0.96) 30%,
      rgba(255, 255, 255, 0.25)
    );
  background-repeat: no-repeat;
  background-origin: border-box;
  background-clip: padding-box, border-box, border-box;
  box-shadow: inset -6px 0 7px 0 rgba(218, 112, 255, 0.5),
    inset 6px 0 7px 0 rgba(255, 24, 24, 0.5);
}

.pipe__bottom::before {
  content: "";
  position: absolute;
  height: 3px;
  right: 0;
  top: 0;
  left: 60px;
  z-index: 4;
  background-image: linear-gradient(
    to left,
    #ffffff 30%,
    rgba(255, 255, 255, 0) 100%
  );
}

.pipe__bottom::after {
  content: "";
  position: absolute;
  left: 3px;
  width: 14px;
  height: 14px;
  top: 0px;
  bottom: 1px;
  border-radius: 50%;
  background: #ffa601;
  z-index: 5;
}

.pipe__imgage {
  position: absolute;
  bottom: -16px;

  width: 72px;
  height: 68px;
  background: url(https://img.alicdn.com/tfs/TB1zz7EZUY1gK0jSZFMXXaWcVXa-72-68.png)
    no-repeat left top;
  background-size: 72px 68px;
  z-index: 10;
}

.pipe__imgage--left {
  left: -22px;
}

.pipe__imgage--right {
  right: -22px;
  transform: scaleX(-1);
}

.modal__body--content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}