<div class="container">
  <div class="img-quote">
      <img src="http://law2.umkc.edu/faculty/projects/ftrials/wilde/wildebest.jpg">
      <blockquote>“Here is a quote.”<small>Name of who said it</small></blockquote>
      <div class="clear"></div>
  </div>
</div>

<div class="container">
  <div class="img-quote right-triangle">
    <img src="https://womo.com.ua/wp-content/uploads/2015/04/charlotte-bronte.jpg">
    <blockquote>“Here is a quote.”<small>Name of who said it</small></blockquote>
    <div class="clear"></div>
  </div>
</div>
.container {
  width: 40%;
  margin: 30px;
  float: left;
}

.clear {
    clear: both;
}

.img-quote {
    position: relative;
    padding: 20px;
    box-sizing: border-box;
    background-color: #f5f5f5;
    border: 1px solid #d2d4d7;

    // Front Triangle
    &:before {
        position: absolute;
        bottom: -37px;
        left: 81px;
        content: " ";
        border-style: solid;
        border-width: 0 36px 36px 0;
        border-color: transparent #d2d4d7 transparent transparent;
    }

    // Back Triangle (Border)
    &:after {
        position: absolute;
        bottom: -34px;
        left: 81px;
        content: " ";
        border-style: solid;
        border-width: 0 35px 35px 0;
        border-color: transparent #f5f5f5 transparent transparent;
    }
  
    img {
        float: left;
        width: 170px;
        height: 170px;
        margin-right: 20px;
        border-radius: 50%;
    }

    blockquote {
        float: left;
        width: calc(100% - 190px);
        margin: 0;
        font-size: 20px;
        font-family: "Roboto Slab", serif;
        color: #004960;

        small {
            display: block;
            margin-top: 10px;
            font-size: 16px;
            font-family: "Roboto Slab", serif;
            font-weight: bold;
        }
    }
    &.right-triangle {

        // Front Triangle
        &:before {
            right: 80px;
            left: initial;
            border-width: 36px 37px 0 0;
            border-color: #d2d4d7 transparent transparent transparent;
        }

        // Back Triangle (Border)
        &:after {
            right: 81px;
            left: initial;
            border-width: 35px 35px 0 0;
            border-color: #f5f5f5 transparent transparent transparent;
        }
    }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.