Rounded Ribbon Box

dabblet.css

/* Rounded Ribbon Box */

body{
  font: 14px Helvetica, Arial;
}

.ribbon {
  width: 600px;
  margin: 40px auto 10px;
  color: #333;
  background: #eee;
}
.ribbon h3 {
  display: block;	
  margin: 0;
  padding: 10px;
  position: relative;
  color: white;
  background: rgb(193,0,0);
}
.ribbon h3::before, .ribbon h3::after{
  content: '';
  width: 20px;
  height: 140%;
  position: absolute;
  z-index: 5;
  left: -20px;
  top: 0;		
}

.ribbon h3::before{
  background: rgb(193,0,0);		
  border-radius: 10px 0 0 10px;	
}

.ribbon h3::after{
  z-index: 6;
  background: darkred;
  box-shadow: inset 10px 4px 10px rgba(0, 0, 0, 0.5);
  height: 40%;
  top: auto;
  bottom: -40%;
  border-radius: 20px 0 0 20px;    
}

p{
  padding: 10px;
  margin: 0;
}

dabblet.html

<div class="ribbon">
  <h3>Recent Events / Testimonials</h3>
  <p>Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti.</p>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}