<div class="ticket">
  <div class="left"></div>
  <div class="right"></div>
  <div class="ticket-content-wrapper"></div>
</div>

:root {
  --size: 1;
  --background: #000;
  --color1: #d25778;
  --color2: #ec585c;
  --color3: #e7d155;
  --color4: #56a8c6;
}

body {
  background: var(--background);
  color: white;
  font-family: Arial, Helvetica, sans-serif;
}

.ticket {
  width: 650px;
  height: 320px;
  margin: 100px auto;
  position: relative;
  transition: all 300ms cubic-bezier(0.03, 0.98, 0.53, 0.99) 0s;
  background: linear-gradient(
    to right,
    var(--color1),
    var(--color2),
    var(--color3),
    var(--color4)
  );
  border-radius: 20px;
  padding: 5px;
}

.ticket:before,
.ticket:after {
  content: '';
  display: block;
  position: absolute;
  top: 130px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  z-index: 2;
}

.ticket:before {
  background: var(--color1);
  left: -30px;
}

.ticket:after {
  right: -30px;
  background: var(--color4);
}

.ticket-content-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  background: var(--background);
  border-radius: 15px;
}
.ticket-content-wrapper:before,
.ticket-content-wrapper:after {
  content: '';
  display: block;
  position: absolute;
  top: 130px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--background);
  z-index: 3;
}

.ticket-content-wrapper:before {
  left: -30px;
}

.ticket-content-wrapper:after {
  right: -30px;
}

.left,
.right {
  position: absolute;
  top: 110px;
  width: 50px;
  height: 100px;
  background: var(--background);
  z-index: 4;
}

.left {
  left: -50px;
}

.right {
  right: -50px;
}