<div>
	<h2>Dolor sippup fan toppu</h2>
	<p>lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam eveniet dicta laborum ut necessitatibus. Pariatur, illum. Consequatur porro nemo voluptatum similique nam, perspiciatis velit accusamus exercitationem optio necessitatibus libero odio?</p>
	<h4 align="right">-Ipsum Gibbus</h4>
</div>
body {
	background: #aaa;
	display: flex;
	height: 100vh;
	font-size: 1.5em;
}

div {
	position: relative;
	width: 600px;
	margin: auto;
	padding: 1rem;
	background-color: transparent;
	background-image: linear-gradient(
			-45deg,
			transparent,
			transparent 2%,
			white 2%,
			white 85%,
			transparent,
			85%,
			transparent
		),
		linear-gradient(to bottom right, #2ad, #2ad 90%, transparent 90%);
	background-position: top left, 0.2em 0.2em;
	background-repeat: no-repeat;
	filter: drop-shadow(0 0 15px #0005);
}

div::before,
div::after {
	position: absolute;
	z-index: -1;
	display: block;
	width: 3rem;
	height: 4rem;
	content: "";
	z-index: 0;
	font-size: 8rem;
	font-family: Georgia, Times, Garamond, serif;
}

div::before {
	top: -2rem;
	left: 1rem;
	content: open-quote;
}

div::after {
	bottom: -1rem;
	right: 1rem;
	content: close-quote;
}

div::before,
div::after,
div h2 {
	text-shadow: -2px 2px #fff, -1.5px 1.5px #fff, -1px 1px #fff, -0.5px 0.5px #fff;
}

h2 {
	margin-block-end: 1rem;
}

p {
	margin-block-start: 1rem;
	text-indent: 2ch;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.