<div class="bq">

  <svg  viewBox="0 0 725 275" class="border" preserveAspectRatio="none">

    <path d="M 5,100 
             L 5,70 
             Q 5,50 15,50 
             L 450,50" ></path>

    <path d="M 450,50
             L 475, 5
             L 500, 50" ></path>     

    <path d="M 500,50
             L 710,50 
             Q 720,50 720,75 
             L 720,100 
             L 720,250 
             Q 720,270 710,270 
             L 700,270
             L 680,270" ></path>

    <path d="M 150,270 
             L 15,270
             Q 5,270 5,255
             L 5,200" ></path>
  </svg>


  <div class="bq-quote">
    <i class="fas fa-quote-left"></i>
  </div>

  <div class="bq-body">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum aspernatur reiciendis eaque alias neque dicta! Architecto, quasi corporis velit blanditiis.      
  </div>

  <div class="bq-author">
    <span>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, labore.
    </span>
    <span>
      <i class="fas fa-money-bill-wave"></i>
    </span>
  </div>
</div>
* {
  box-sizing:border-box;
}

html,
body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}

body {
  background: url(https://images.unsplash.com/photo-1476842634003-7dcca8f832de?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80) center no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
  font-family: sans-serif;
}

svg path {
  stroke: #fff;
  fill: none;
  stroke-width:2;
  stroke-linecap: butt;
  stroke-linejoin:miter;
}

.bq {
  position: relative;
  max-width: 700px;
  width: 100%;
  margin: 5rem auto;
  color:#fff;
  padding: 2rem 4rem 0;
}

.bq-quote {
  color: yellow;
  font-size: 2rem;
  position: absolute;
  left: 0;
  top: 3rem;
}

.bq-author {
  color: yellow;
  display: flex;
  padding: 0rem 0;
  transform: translateY(50%);
  text-align: right;
  width: 80%;
  margin-left: auto;
}

.bq-author span {
  display: block;
}

.bq-author i {
  font-size: 2rem;
  margin-left: 1rem;
}

.line-lt {
  position: absolute;
  left: 0;
  top:0;
  width: 70%;
}

.line-corner {
  position: absolute;
  left: 70%;
  top:0;
  width: 30px;
  height: 30px;
}

.border {
  position: absolute;
  left: 1rem;
  top: 0;
  width: calc(100% - 1rem );
  height: 100%;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.