<div class="shape">
  lorem ipsum dolor sit amet.
</div>
body {
  font-family: Lato, sans-serif;
}
body {
  font-size:20px;
  font-family:Avenir, sans-serif;
}
.shape {
  position:relative;
  width:100px;
  margin:50px auto;
  padding:20px;
  
  color:#fff;
  background:#cc3f85;
  border-radius:25%;
}
.shape:before,
.shape:after {
  content:'';
  position:absolute;
  width:100px;
  height:100px;
  background:inherit;
  
  /* change this to see the difference 
  between positive/negative values. 
  Try setting z-index: 20 on the pseudo
  elements and z-index: 0 on the .shape */
  z-index:-1; 
}
.shape:before {
  left:-40px;
  border-radius:50%;
}
.shape:after {
  top:-25px;
  right:-25px;
  border-radius:50%;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.