<div id="content">
<div class="testimonial">
<blockquote>
Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
</blockquote>
<div></div>
<p>
Jane Smith — New York, USA
</p>
</div>
</div>
body {
color: #1a1a1a;
font-family: "Open Sans", Helvetica, sans-serif;
font-size: 1rem;
line-height: 1.6em;
text-align: center;
background: rgb(238,174,202);
background: radial-gradient(circle, rgba(238,174,202,1) 0%, rgba(148,187,233,1) 100%);
}
#content {
max-width: 600px;
margin: 25vh auto;
}
.testimonial blockquote {
margin: 10px 10px 0;
background: #efefef;
padding: 20px 60px;
position: relative;
border: none;
border-radius: 8px;
font-style: italic;
}
.testimonial blockquote:before,
.testimonial blockquote:after {
content: "\201C";
position: absolute;
font-size: 80px;
line-height: 1;
color: #757f9a;
font-style: normal;
}
.testimonial blockquote:before {
top: 0;
left: 10px;
}
.testimonial blockquote:after {
content: "\201D";
right: 10px;
bottom: -0.5em;
}
.testimonial div {
width: 0;
height: 0;
border-left: 0 solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #efefef;
margin: 0 0 0 60px;
}
.testimonial p {
margin: 8px 0 0 20px;
text-align: left;
color: #fff;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.