title: Rounded arrow shape with gradient fill
body: <p>For my online game UI, I decided to make <strong>Hill Climb Racing (Android Game)</strong>'s buttons. This is is what I have presently : </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
      color: white;
      font-family: Impact, fantasy;
      font-size: 40px;
      line-height: 100px;
      text-align: center;
  }
  .rect {
      height: 100px;
      width: 280px;
      background: #545D60;
      border-radius: 20px 50px 50px 20px;
      position: relative;
  }
  .rect:before {
      background: #545D60;
      content: "";
      position: absolute;
      top: 6px;
      left: 195px;
      height: 0px;
      width: 0px;
      border-radius: 30px 10px;
      border: 44px solid #545D60;
      transform: rotate(45deg);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="rect"&gt;NEXT&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><img src="https://i.stack.imgur.com/sne4A.png" alt="enter image description here"></p>
  
  <p>The problem lies with aligning the <strong>gradient</strong> properly. A <strong>gradient background</strong> could be added to <code>rect</code>, but the same gradient doesn't align properly with the triangle on the right.<br>
  Solutions such as this one are helpful, but don't apply to what I am trying :
  <a href="https://stackoverflow.com/questions/15437233/creating-a-triangle-in-css-with-a-gradient-background/15439024#15439024">link</a></p>
  
  <p>Also, can we create a responsive shape with gradient background?</p>
  
  <p><strong>Note :</strong> this is not a duplicate, its a completely different question.</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>Also, on hover, the gradient becomes upside down, ie rotates 180 deg. This part I can create, but aligning the gradients of <code>rect</code> and <code>before</code> is still a problem.</p>