create responsive arrow that adapts to height of element

Question

Is it possible to create a responsive arrow like in the image that adapts to the height (aka the left columns second paragraph is deleted) with css only? I tried with borders, rotated and skewed padding and box shadows. But wasn't able to achieve the layout as seen in the image. My problem is the variable height of the "element".

This is the html code implemented:

<div class="container">
  <div class="row">
    <article class="col-container">
      <div class="col-md-6 col-xs-6 col-left">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque maximus eu justo at viverra. Sed sollicitudin semper lectus, et placerat magna hendrerit vel. Nunc ac ipsum non neque dictum congue. Nunc ligula libero, tempus vitae magna eu, ultrices
          porta est. Vivamus et turpis scelerisque, vehicula tellus in, feugiat augue. Aliquam egestas massa id leo suscipit, id venenatis tellus dictum. Sed ante eros, iaculis a diam in, dapibus sagittis ipsum. Sed in eros id odio ornare interdum.</p>
        <p>Sed volutpat fringilla tempus. Quisque sit amet elit non ante facilisis accumsan. Phasellus varius facilisis eleifend. Sed iaculis arcu magna, ut ullamcorper diam venenatis eget. Pellentesque iaculis risus vitae augue ultricies accumsan. Etiam
          vulputate, ante a blandit luctus, sapien augue scelerisque ligula, id rhoncus massa arcu eget eros. Ut et nisl eu purus ullamcorper suscipit. Pellentesque in suscipit ipsum, quis auctor augue. Vestibulum non aliquet ipsum, sed luctus nibh. Praesent
          vulputate efficitur augue, eu mattis metus porttitor pharetra.
        </p>
      </div>
      <div class="col-md-6 col-xs-6 col-right">
        <p>
          In placerat nulla non mauris dictum ullamcorper. Integer elementum ipsum sit amet lacus imperdiet mollis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec pulvinar, mi ac laoreet consectetur, lorem mi congue
          augue, a pellentesque erat neque eu purus.
        </p>
      </div>
    </article>
  </div>
</div>

And this the css:

.col-container {
  overflow: hidden;
  position: relative;
}

.col-left,
.col-right {
  margin-bottom: -9999px;
  padding-bottom: 9999px;
}

.col-left {
  background-color: #fff;
}

.col-right {
  background-color: #019CDC;
}

I made a jsfiddle to play around here: https://jsfiddle.net/ae6L4or5/

Answer 1

clip-path Solution

This is achievable with the CSS property clip-path.

This is still fairly unsupported and as such should be used more as a future recommendation

.col-container {
  overflow: auto;
  box-sizing: border-box;
  background: skyblue;
}
.col-container .col-left {
  background: white;
  -webkit-clip-path: polygon(80% 0, 95% 50%, 80% 100%, 0 100%, 0 0);
  clip-path: polygon(80% 0, 95% 50%, 80% 100%, 0 100%, 0 0);
  width: 60%;
  float: left;
  padding: 12px;
  padding-right: 12%;
  box-sizing: border-box;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <article class="col-container">
      <div class="col-md-8 col-xs-8 col-left">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque maximus eu justo at viverra. Sed sollicitudin semper lectus, et placerat magna hendrerit vel. Nunc ac ipsum non neque dictum congue. Nunc ligula libero, tempus vitae magna eu, ultrices
          porta est. Vivamus et turpis scelerisque, vehicula tellus in, feugiat augue. Aliquam egestas massa id leo suscipit, id venenatis tellus dictum. Sed ante eros, iaculis a diam in, dapibus sagittis ipsum. Sed in eros id odio ornare interdum.</p>
        <p>Sed volutpat fringilla tempus. Quisque sit amet elit non ante facilisis accumsan. Phasellus varius facilisis eleifend. Sed iaculis arcu magna, ut ullamcorper diam venenatis eget. Pellentesque iaculis risus vitae augue ultricies accumsan. Etiam
          vulputate, ante a blandit luctus, sapien augue scelerisque ligula, id rhoncus massa arcu eget eros. Ut et nisl eu purus ullamcorper suscipit. Pellentesque in suscipit ipsum, quis auctor augue. Vestibulum non aliquet ipsum, sed luctus nibh. Praesent
          vulputate efficitur augue, eu mattis metus porttitor pharetra.
        </p>
      </div>
      <div class="col-md-4 col-xs-4 col-right">
        <p>
          In placerat nulla non mauris dictum ullamcorper. Integer elementum ipsum sit amet lacus imperdiet mollis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec pulvinar, mi ac laoreet consectetur, lorem mi congue
          augue, a pellentesque erat neque eu purus.
        </p>
      </div>
    </article>
  </div>
</div>

• clip-path maker - Clippy
• CanIUse Support
• MDN Documentation

---