Rectangle with curved sides and sharp corners


Is it possible to make something similar to this image with CSS? Each side of the rectangle has a curve on it. This is different to straight sides with only the border being rounded.

enter image description here


Answers:


You can achieve the curved sides and pointed corners with the intersection of 2 oval shapes. You can use an oval div with hidden overflow and an oval pseudo element with the black background.

The pseudo element needs to be centered in it's parent. In the following example, I used absolute positioning to center it :

div{
  position:relative;
  width:600px; height:150px;
  margin:0 -150px; 
  border-radius:50%;
  overflow:hidden;
}
div:after{
  content:'';
  position:absolute;
  top:-175px; left:150px;
  height:500px; width:300px;
  border-radius:inherit;
  background:#000;
}
<div></div>