SO-33953299

by David Thomas

HTML

<div class="quote">
  <!-- the <pre> elements are included only to show the
       classes used for styling the quotes, they have
       no part to play in the CSS which creates the
       'arrows' or 'quotes' -->
  <pre>"quote"</pre>
  <p>Lorem ipsum dolor sit amet, nibh patrioque nam ne, graeco consequat reprehendunt ut mei, ex enim labitur vis. Graeci causae adversarium his no. Pro enim causae nostrum eu. Ius unum ornatus liberavisse et, mei dolore menandri mandamus no.</p>
</div>

<div class="quote quote-center">
  <pre>"quote quote-center"</pre>
  <p>Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive
    innovation via workplace diversity and empowerment.

  </p>
</div>

<div class="quote quote-left">
  <pre>"quote quote-left"</pre>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsum.

  </p>
</div>

<div class="quote quote-right">
  <pre>"quote quote-right</pre>
  <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here,
    content here', making it look like readable English. Many desktop publishing packages and web page editors now use...

CSS

body {
  background-color: #000;
}

.quote {
  border: 1px solid #fff;
  /* Hiding the top-border by making it transparent, to
     prevent a line from showing beneath the transparency
     of the pseudo-elements */
  border-top-color: transparent;
  /* adjustable to taste: */
  width: 50vw;
  padding: 0.4em;
  color: #fff;
  font-weight: bold;
  /* to allow the pseudo-elements to be placed relative
     to this element, rather than any other ancestors */
  position: relative;
  /* to ensure that the 'arrow' portion is entirely
     visible on screen and between any element
     vertically (on-screen) 'above' the current
     .quote element */
  margin-top: 2em;
}


/* defining the common settings of the arrow portions: */

.quote::before,
.quote::after {
  position: absolute;
  /* moving the arrows to the top of their parent */
  top: 0;
  content: '';
  border-bottom: 1px solid #fff;
  height: 1em;
  /* the negative of the pseudo-element's height
     to align the bottom-border of the pseudo-element
     over the top-border (transparent) of the parent
     element */
  margin-top: -1em;
}

.quote::before,
.quote.quote-center::before {
  /* the right border of the ::before
     pseudo-elements will form the left
     slope of the 'arrow': */
  border-right: 1px solid #fff;
  /* defining a width in which the 'arrow' base is
     equal to ten percent of the width of the element;
     adjust to taste */
  left: 0;
  right: 55%;
  /* skewing the rectangular pseudo-element into
     a parallelogram; the -45deg skews the rectangle
     to rightwards */
  transform: skew(-45deg);
  /* we want the bottom left corner of the pseudo
     element to stay in place relative to the top
     top-left corner of the parent, so we transform
     from that point */
  transform-origin: 0 100%;
  /* to position the left-most point of the pseudo
     element over the left-border of the parent */
  margin-left: -1px;
}

.quote::after,
.quote.quote-center::after {
  border-left: 1px...