.l-quote.quote
%blockquote
%p Simple can be harder than complex: You have to work hard to get your thinking clean to make it simple. But it’s worth it in the end because once you get there, you can move mountains.
%cite Steve Jobs
View Compiled
@import "compass/css3";
body {
background: #f5f5f5;
}
blockquote,
p {
margin: 0;
padding: 0;
}
.l-quote {
position: relative;
width: 300px;
padding: 15px 25px 20px;
margin: 20px auto;
color: #fff;
background: #1abc9c;
}
.quote {
&:after {
@include transform(skewX(-15deg));
content: "";
position: absolute;
top: 100%;
right: 25px;
border-width: 30px 30px 0 0;
border-style: solid;
border-color: #1abc9c transparent;
}
}
blockquote {
font: italic 26px / 1.3 'Lora', serif;
}
cite {
display: block;
margin: 1.5em 0 0;
font: 14px / 1.2 Arial, sans-serif;
&:before {
content: "— ";
}
}
View Compiled
This Pen doesn't use any external CSS resources.