How to reshape a div to look and cut the sides in React?

Question

I am not sure if google already has an answer for this but my struggle was that I simply couldn't word this properly so nothing showed up. Here is the style for div:

<div className="tc bg-light-green dib br3 pa3 ma2 grow bw2 shadow-5">

Inside the div is not relevant as it just shows the name and description with image source thats why I didn't add it here. As it can be seen, this is using tachyon classes in React. I want to know if there is a way to achieve to second pic meaning, cut the sides and replace it with the background color. Please let me know if there is anything else that I should post. But I think it is very straightforward. Thanks.

Answer 1

Take a look at the border radius docs on MDN. You'll find a similar example with variable radius per direction.

https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius

A percentage radius will apply more to a longer dimension (height) vs short (width) and look like your effect.

Here's an example that looks like yours that you could tweak:

article {
  background: teal;
  height: 300px;
  width: 150px;
  padding: 10px;
}

article > div {
  background: cyan;
  border-radius: 60% 20px 60% 20px;
  height: 100%;
} 

<article>
  <div>
  </div>
</article>

If you want something more refined like custom curves, I think your best bet is clip-path https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path

It's just a little annoying to generate the complex paths. A side benefit of clip-path is that CSS animating it tends to look great whether you shift the path on hover, or set it on load.