الگو:نقل قول/style.css

.quote {
	display: inline-block;
	margin: 1em;
	overflow: hidden;
}
.quote blockquote {
	background-color: #fff;
	border: solid 2px #757575;
	display: inline-block;
	margin: 0;
	padding: 1em;
	position: relative;
}
.quote blockquote:before {
	background-color: #fff;
	bottom: -10%;
	content: "";
	left: 0;
	position: absolute;
	right: 0;
	top: -10%;
	transform: rotate(-15deg) skew(5deg);
}
.quote blockquote cite {
	display: block;
	font-style: italic;
	text-align: right;
}
.quote blockquote cite:before {
	content: "- ";
}
.quote blockquote > * {
	position: relative;
	z-index: 1;
}

.animated-border-quote {
	display: inline-block;
	margin: 1em;
	overflow: hidden;
}
.animated-border-quote blockquote {
	background-color: #fff;
	border: solid 2px #757575;
	display: inline-block;
	margin: 0;
	padding: 1em;
	position: relative;
	border-bottom: 3px solid #00b7ed;
	background-color: #fefffa;
	border-radius: 16px 0 16px 0px;
}
.animated-border-quote blockquote:before {
	animation: clockwise 30s infinite linear;
	background-color: #fff;
	bottom: 10%;
	content: "";
	left: 0;
	opacity: 0.5;
	position: absolute;
	right: 0;
	top: 10%;
}
.animated-border-quote blockquote:after {
	animation: counter 30s infinite linear;
	background-color: #fff;
	bottom: 10%;
	content: "";
	left: 0;
	opacity: 0.5;
	position: absolute;
	right: 0;
	top: 10%;
}
.animated-border-quote blockquote cite {
	display: block;
	font-style: italic;
	text-align: right;
}
.animated-border-quote blockquote cite:before {
	content: "- ";
}
.animated-border-quote blockquote > * {
	position: relative;
	z-index: 1;
}

@keyframes clockwise {
	0% {
		transform: rotate(0);
	}
	100% {
		transform: rotate(360deg);
	}
}

@keyframes counter {
	0% {
		transform: rotate(0);
	}
	100% {
		transform: rotate(-360deg);
	}
}