Blockquote with Side Ribbon Header


width: 500px;
padding: 30px 50px 50px 50px;
margin: 0 auto;
background-color: #ebe9e0;
border: 20px solid #333;

blockquote p
position: relative;
width: 100%;
font-size: 1.5em;
font-weight: bold;
padding: 10px 20px 6px 70px;
margin: 0px 10px 10px -70px;
color: #555;
background-color: #B0E0E6;
text-shadow: 0px 1px 2px #bbb;
-webkit-box-shadow: 0px 2px 4px #888;
-moz-box-shadow: 0px 2px 4px #888;
box-shadow: 0px 2px 4px #888;

blockquote p:before
content: ' ';
position: absolute;
width: 30px;
height: 0;
left: -30px;
top: 12px;
border-width: 20px 10px;
border-style: solid;
border-color: #9ec9cf #9ec9cf #9ec9cf transparent;

blockquote p:after
content: ' ';
position: absolute;
width: 0;
height: 0;
left: 0px;
top: 100%;
border-width: 5px 10px;
border-style: solid;
border-color: #9ec9cf #9ec9cf transparent transparent;


Notice to our Readers

The blockquotes here are designed by Blogger's Grid. We exert every effort to make this design simple and workable.

You may use it on your personal or commercial blog provided that you provide a back link to this site.