Rectangle Shapes With Special Borders

HTML

<div class="about">
  <div class="about-inner">
    <h3>Main Problems?</h3>
    <ul>
      <li><a href="#">Not retina-ready because of PNG</a></li>
      <li><a href="#">Does not rely solely on CSS</a></li>
      <li><a href="#">Not lightweight because of Data-URI</a></li>
    </ul>
  </div>
</div>

SCSS

.about {
	background-color: #9eb091;
	width: 15em;
	padding: 5em;
	color: white;
	position: relative;
	text-align: center;
	margin: 5em auto;
	border-top-right-radius: 20px;
	border-bottom-left-radius: 20px;
	$rectangle-radius: 100px;

	&:before,
	&:after,
	.about-inner:before,
	.about-inner:after {
		content: '';
		display: block;
		width: $rectangle-radius;
		height: $rectangle-radius;
		position: absolute;
		background: #f5f7f5;
	}
	&:after,
	.about-inner:after {
		bottom: 0;
		background: #9eb091;
	}
	&:before,
	&:after {
		top: 0;
		left: -$rectangle-radius;
	}
	&:before {
		z-index: 30;
		border-top-right-radius: $rectangle-radius;
	}
	.about-inner:before,
	.about-inner:after {
		bottom: 0;
		right: -$rectangle-radius;
	}
	.about-inner:before {
		z-index: 30;
		border-bottom-left-radius: $rectangle-radius;
	}
}