<div class="wrapper">
    <blockquote class="stacked">
      <p>
        Nam aliquam convallis suscipit. Suspendisse bibendum ligula nec congue finibus.
        Duis at maximus orci. Nam cursus vehicula libero a pretium. Suspendisse
        tempus, tellus et volutpat convallis, nisi ipsum lacinia magna, vitae cursus
        turpis ipsum vitae magna. Nunc tempor condimentum lacus vel lobortis.
      </p>
    </blockquote>
    <blockquote class="shadow">
      <p>
        Nam aliquam convallis suscipit. Suspendisse bibendum ligula nec congue finibus.
        Duis at maximus orci. Nam cursus vehicula libero a pretium. Suspendisse
        tempus, tellus et volutpat convallis, nisi ipsum lacinia magna, vitae cursus
        turpis ipsum vitae magna. Nunc tempor condimentum lacus vel lobortis.
      </p>
    </blockquote>
    <blockquote class="rule">
      <p>
        Nam aliquam convallis suscipit. Suspendisse bibendum ligula nec congue finibus.
        Duis at maximus orci. Nam cursus vehicula libero a pretium. Suspendisse
        tempus, tellus et volutpat convallis, nisi ipsum lacinia magna, vitae cursus
        turpis ipsum vitae magna. Nunc tempor condimentum lacus vel lobortis.
      </p>
    </blockquote>
</div>
@import url(https://fonts.googleapis.com/css?family=Noto+Sans);

$blue: #0000FF;

body {
  color: $blue;
  font-family: 'Noto Sans';
}

.wrapper {
  margin: 0 auto;
  width: 90%;
  padding-bottom: 50px;
}

blockquote {
  background: white;
  padding: 20px 30px 20px 30px;
  margin: 50px auto;
  width: 50%;
  max-width: 500px;
}

.stacked {
  border: solid 2px;
  padding: 20px 30px 20px 30px;
  box-shadow: 13px 13px 0 0 white,
              15px 15px 0 0 $blue,
              15px 11px 0 0 $blue,
              11px 15px 0 0 $blue;
}

.shadow {
  border: solid 2px;
  box-shadow: 15px 15px 0 0 $blue;
}

.rule {
  position: relative;
  left: 7px;
  background: lighten($blue, 40%);
  box-shadow: -2px 0 0 $blue,
              -4px 0 0 lighten($blue, 40%),
              -7px 0 0 $blue;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.