SVG Solution:
You can achieve this using SVG:
MARKUP:
First lets create our SVG shape using the <path> tag. It is important to add the attribute fill with a value of currentColor which will be explained below in a few more steps.
<path fill="currentColor" d="M0 0 L0 100 L35 50 Z"></path>
More info: <path> tag here.
After creating our "triangle" shape, we will wrap it in a <symbol> tag with an id for us to be able to use it multiple times just like SVG Icons, with a spritesheet and using the <use> tag.
<svg id="spriteSheet">
<defs>
<symbol id="triangleSeparator" viewBox="0 0 100 100" preserveAspectRatio="none">
<path fill="currentColor" d="M0 0 L0 100 L35 50 Z"></path>
</symbol>
</defs>
</svg>
The <use> element lets you reuse existing elements, giving you a
similar functionality to the copy-paste functionality in a graphics
editor.
More info: here.
Okay, so now we got our SVG ready for use (pun inteded). Lets wrap it in a <svg> tag and add a class to it to style it later.
<svg class="separator__triangle">
<use xlink:href="#triangleSeparator"></use>
</svg>
Next, wrap the above <svg> tag with another element for us to position it like we want.
<div class="separator__container">
<svg class="separator__triangle">
<use xlink:href="#triangleSeparator"></use>
</svg>
</div>
STYLING:
Remember the value currentColor we defined in our <path> attribute fillin the beginning?
It's time to use it, currentColor variable will follow the cascade and get the value from our color property defined in the following class:
.separator__triangle {
width: 100px; /* You can change the width if you want it to be bigger or smaller*/
height: 100% /* Used to fill the whole container */;
color: white; /* This is the color of the triangle shape */
}
Positioning our container and hiding our spritesheet (this is needed to prevent it from rendering an empty space):
#spriteSheet {
display: none;
}
.separator__container {
pointer-events: none; /* We don't want it to have any pointer events do we?*/
position: absolute; /* Positioning */
top: 0;
left: 0;
height: 100%; /* Cover whole height of the container*/
}
Finally, we are ready to go!
CODE SNIPPET:
.container {
display: flex;
}
.col {
padding: 3em;
}
.col--left {
background-color: #fff;
}
.col--right {
background-color: #019CDC;
}
.col--with-separator {
position: relative;
}
#spriteSheet {
display: none;
}
.separator__container {
pointer-events: none;
position: absolute;
top: 0;
left: 0;
height: 100%;
}
.separator__triangle {
width: 100px;
height: 100%;
color: white;
}
<main>
<article class="container">
<section class="col 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>
</section>
<section class="col col--right col--with-separator">
<div class="separator__container">
<svg class="separator__triangle">
<use xlink:href="#triangleSeparator"></use>
</svg>
</div>
<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>
</section>
</article>
</main>
<svg id="spriteSheet">
<defs>
<symbol id="triangleSeparator" viewBox="0 0 100 100" preserveAspectRatio="none">
<path fill="currentColor" d="M0 0 L0 100 L35 50 Z"></path>
</symbol>
</defs>
</svg>
Remember that whenever you want to use the arrow, you will just need to add the following to your container:
<div class="separator__container">
<svg class="separator__triangle">
<use xlink:href="#triangleSeparator"></use>
</svg>
</div>
Note: Your container must have position: relative; as one of its CSS properties, because our arrow is positioned using the absolute value.
PLAYGROUND:
Lets add a modifier to invert the arrow and use it on the left column!
.container {
display: flex;
}
.col {
padding: 3em;
}
.col--left {
background-color: #fff;
}
.col--right {
background-color: #019CDC;
}
.col--with-separator {
position: relative;
}
#spriteSheet {
display: none;
}
.separator__container {
pointer-events: none;
position: absolute;
top: 0;
left: 0;
height: 100%;
}
.separator__triangle {
width: 100px;
height: 100%;
color: white;
}
.separator__container--inverted {
left: calc(100% - 100px);
}
.separator__container--inverted .separator__triangle {
color: #019CDC;
transform: rotateZ(180deg);
}
<main>
<article class="container">
<section class="col col--left col--with-separator">
<div class="separator__container separator__container--inverted">
<svg class="separator__triangle separator__triangle--inverted">
<use xlink:href="#triangleSeparator"></use>
</svg>
</div>
<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>
</section>
<section class="col col--right">
<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>
</section>
</article>
</main>
<svg id="spriteSheet">
<defs>
<symbol id="triangleSeparator" viewBox="0 0 100 100" preserveAspectRatio="none">
<path fill="currentColor" d="M0 0 L0 100 L35 50 Z"></path>
</symbol>
</defs>
</svg>
JSFIDDLE
This is an alternative to Stewartside solution, lacking browser support at the moment.
EDIT:
Adressing the problem you have with equal height columns, Flexbox is used in the demo, which further explanation is not included in the scope of this answer.
However, here's another post where you can find useful resources on flexbox in the more info section.
