Blockquote with Vertical Line Bar and Dot on Top

blockquote-2

CSS:

blockquote
{
	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;
}

HTML:

<blockquote>
<div class="verticalLine2"></div>
<div class="verticalLine1">
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.
</div></blockquote>
Advertisements