<div class="container">
<div class="quote-box">
<div class="quote">
<blockquote>
"The secret of getting ahead is getting started. The secret of getting started is breaking your complex overwhelming tasks into small manageable tasks, and starting on the first one."
</blockquote>
</div>
<div class="name">
Mark Twain
</div>
</div>
</div>
body {
background-color: #e0efef;
}
/* Contain demo size */
.container {
width: 400px;
}
.quote {
background-color: #6b936a;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
color: #fff;
margin: 0;
padding: 20px;
font-size: 20px;
}
.name {
background-color: #333;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
color: #fff;
font-size: 20px;
padding: 20px;
text-align: center;
}
/* Reset */
blockquote {
padding: 0;
margin: 0;
}
blockquote::after {
border-color: transparent #6b936a transparent transparent;
border-image: none;
border-style: solid;
border-width: 20px;
top: 40px;
content: " ";
display: block;
right: 75%;
position: relative;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.