<div class="flex">
  <div class="parent">
    <svg viewBox="0 0 200 70" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <linearGradient id="lg">
          <stop stop-color="#FC6838" offset="0%" />
          <stop stop-color="#F2007B" offset="100%" />
        </linearGradient>
      </defs>
      <path d="M0,0 200,0 200,50 100,70 0,50" fill="#fff" />>
    </svg>
  </div>
  <div class="parent">
    <svg viewBox="0 0 200 70" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <linearGradient id="lg">
          <stop stop-color="#FC6838" offset="0%" />
          <stop stop-color="#F2007B" offset="100%" />
        </linearGradient>
      </defs>
      <path d="M0,0 200,0 200,50 100,70 0,50" fill="#fff" />>
    </svg>
  </div>
  <div class="parent active">
    <svg viewBox="0 0 200 70" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <linearGradient id="lg">
          <stop stop-color="#FC6838" offset="0%" />
          <stop stop-color="#F2007B" offset="100%" />
        </linearGradient>
      </defs>
      <path d="M0,0 200,0 200,50 100,70 0,50" fill="url(#lg)" />>
    </svg>
  </div>
  <div class="parent">
    <svg viewBox="0 0 200 70" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <linearGradient id="lg">
          <stop stop-color="#FC6838" offset="0%" />
          <stop stop-color="#F2007B" offset="100%" />
        </linearGradient>
      </defs>
      <path d="M0,0 200,0 200,50 100,70 0,50" fill="#fff" />>
    </svg>
  </div>
</div>

* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  background: #ccc;
}

.flex {
  display: flex;
  padding: 10px;
}

.parent {
  width: 250px;
  margin-right: 10px;
}

.parent:nth-child(4) {
  margin-right: 0px;
}