title: Need help making a CSS radial-gradient that flows seamlessly through 2 elements that are not of the same height or width
body: <p><a href="http://jsfiddle.net/nicktheandroid/F8v2c/3/" rel="nofollow noreferrer">http://jsfiddle.net/nicktheandroid/F8v2c/3/</a></p>
  
  <p>I'm trying to make a radial gradient that flows seamlessly between 2 sibling elements - starting from 10px or 20px to the right of the button, flowing down about half way down through the ".content" div. </p>
  
  <p>I believe this just takes correctly positioning the gradients for both elements so it looks like it's one flowing radial gradient, that's the problem, I've been trying to do this but I've become frustrated - and the answer might help others.</p>
  
  <p>There's a background behind the menu, so I cannot simple 'white-out' the portion next to "features" in the image below - see the jsfiddle.</p>
  
  <p>See image for example.</p>
  
  <p><img src="https://i.stack.imgur.com/0yVmO.jpg" alt="Example of radial gradient flowing through 2 elements seamlessly"></p>