how to achieve double borders with adjacent divs that have angled border decorations

Question

I'm trying to create three separate containers with a "comic book strip" kind of feel. I would like the end result to look like this image with white borders surrounded by black boarders and have angled dividers between them:

This is the closest I've come to achieving this, however you will see that I'm missing the inner black borders. I'm also not sure how to draw the main black borders on top and bottom and allow breaks in them for the white to intersect. (Please run the snippet in Full Screen Mode):

.container {
    width: 1020px;
}

.clear{clear:both; font-size:0px;line-height:0px; display:block;}

.categorycta {
	border-top: 2px solid #000;
	border-bottom: 2px solid #000;
	background-color: #ffffff;
}

.bandtop {
	content: '';
	height: 10px;
	background-color: #ffffff;
	display: block;
	border-top: 2px solid #000;
}

.bandbot {
	content: '';
	height: 10px;
	background-color: #ffffff;
	display: block;
	border-bottom: 2px solid #000;
}

.categorycta .col {
	position: relative;
	height: 216px;
    width: 340px;
	float: left;
	background-size: cover;
}

.categorycta .col.left:after {
	content: '';
    line-height: 0;
    font-size: 0;
    width: 0;
    height: 0;
    border-bottom: 20px solid transparent;
    border-top: 216px solid #fff;
    border-left: 10px solid transparent;
    border-right: 0 solid #fff;
    position: absolute;
    top: 0;
    right: 0;
}

.categorycta .col.mid:before {
	content: '';
    line-height: 0;
    font-size: 0;
    width: 0;
    height: 0;
    border-bottom: 216px solid #fff;
    border-top: 20px solid transparent;
    border-left: 0px solid transparent;
    border-right: 10px solid transparent;
    position: absolute;
    top: -20px;
    left: 0;
}

.categorycta .col.mid:after {
    content: '';
    line-height: 0;
    font-size: 0;
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-bottom: 216px solid #fff;
    border-left: 10px solid transparent;
    border-right: 0 solid #fff;
    position: absolute;
    top: -20px;
    right: 0;
}

.categorycta .col.right:before {
    content: '';
    line-height: 0;
    font-size: 0;
    width: 0;
    height: 0;
    border-top: 216px solid #fff;
    border-bottom: 20px solid transparent;
    border-left: 0px solid transparent;
    border-right: 10px solid transparent;
    position: absolute;
    top: 0;
    left: 0;
}

<div class="container">
<div class="bandtop"></div>
<div class="categorycta">
    <div class="col left" style="background-image: url('http://lorempixel.com/340/220/');">

    </div>
    <div class="col mid" style="background-image: url('http://lorempixel.com/340/222/">
    </div>
    <div class="col right" style="background-image: url('http://lorempixel.com/340/225/">
    </div>
    <div class="clear"></div>
</div>
<div class="bandbot"></div>
</div>

Answer 1

You need to remove the existing borders, instead you can use transform: skewX(2deg); and add the black borders around it, use margin-top to cover up the top and bottom border.

Example:

.container {
    width: 1020px;
}

.clear{clear:both; font-size:0px;line-height:0px; display:block;}

.categorycta {
	border-top: 2px solid #000;
	border-bottom: 2px solid #000;
	background-color: #ffffff;
}

.bandtop {
	content: '';
	height: 10px;
	background-color: #ffffff;
	display: block;
	border-top: 2px solid #000;
}

.bandbot {
	content: '';
	height: 10px;
	background-color: #ffffff;
	display: block;
	border-bottom: 2px solid #000;
}

.categorycta .col {
	position: relative;
	height: 216px;
    width: 340px;
	float: left;
	background-size: cover;
}

.categorycta .col.left:after {
	  content: '';
    line-height: 0;
    font-size: 0;
    width: 10px;
    height: 102%;
    /* border-bottom: 20px solid transparent; */
    /* border-top: 216px solid #fff; */
    /* border-left: 10px solid transparent; */
    /* border-right: 0 solid #fff; */
    background: white;
    transform: skewX(2deg);
    border-left: 2px solid black;
    border-right: 2px solid black;
    margin-top: -2px;
    z-index: 1;
    position: absolute;
    top: 0;
    right: -10px;
}

.categorycta .col.mid:before {
	content: '';
    line-height: 0;
    font-size: 0;
    width: 0;
    height: 0;
    border-bottom: 216px solid #fff;
    border-top: 20px solid transparent;
    border-left: 0px solid transparent;
    border-right: 10px solid transparent;
    position: absolute;
    top: -20px;
    left: 0;
}

.categorycta .col.mid:after {
    content: '';
    line-height: 0;
    font-size: 0;
    width: 10px;
    height: 102%;
    position: absolute;
    top: 0;
    right: -9px;
    background: white;
    transform: skewX(-3deg);
    border-left: 2px solid black;
    border-right: 2px solid black;
    margin-top: -2px;
    z-index: 1;
}

.categorycta .col.right:before {
    content: '';
    line-height: 0;
    font-size: 0;
    width: 0;
    height: 0;
    border-top: 216px solid #fff;
    border-bottom: 20px solid transparent;
    border-left: 0px solid transparent;
    border-right: 10px solid transparent;
    position: absolute;
    top: 0;
    left: 0;
}

<div class="container">
<div class="bandtop"></div>
<div class="categorycta">
    <div class="col left" style="background-image: url('http://lorempixel.com/340/220/');">

    </div>
    <div class="col mid" style="background-image: url('http://lorempixel.com/340/222/">
    </div>
    <div class="col right" style="background-image: url('http://lorempixel.com/340/225/">
    </div>
    <div class="clear"></div>
</div>
<div class="bandbot"></div>
</div>

Answer 2

How about something like this? It may not be the tidiest solution but it looks almost the same as in your picture. You can adjust some values to your liking, I mostly used clip-path. A black background and the image over it in a bit smaller size.

.container {
    width: 1020px;
}

.categorycta {
	border-top: 2px solid #000;
	border-bottom: 2px solid #000;
  padding: 10px 0;
	background-color: #ffffff;
  height: 220px;
}

.comic-panel {
  background-color: #000;
  height: 222px;
  position: absolute;
}

.comic-left {
  -webkit-clip-path: polygon(0 0, 90% 0%, 100% 100%, 0% 100%);
  clip-path: polygon(0 0, 90% 0%, 100% 100%, 0% 100%);
}

.comic-left > img {
  -webkit-clip-path: polygon(1% 1%, 89% 1%, 99% 99%, 1% 99%);
  clip-path: polygon(1% 1%, 89% 1%, 99% 99%, 1% 99%);
}

.comic-middle {
  left: 340px;
  -webkit-clip-path: polygon(0 0, 100% 0, 90% 100%, 10% 100%);
  clip-path: polygon(0 0, 100% 0, 90% 100%, 10% 100%);
}

.comic-middle > img {
  -webkit-clip-path: polygon(1% 1%, 99% 1%, 89% 99%, 11% 99%);
  clip-path: polygon(1% 1%, 99% 1%, 89% 99%, 11% 99%);
}

.comic-right {
  left: 680px;
  -webkit-clip-path: polygon(10% 0%, 100% 0%, 100% 100%, 0% 100%);
  clip-path: polygon(10% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.comic-right > img {
  -webkit-clip-path: polygon(9% 1%, 99% 1%, 99% 99%, 11% 99%);
  clip-path: polygon(9% 1%, 99% 1%, 99% 99%, 11% 99%);
}

<div class="container">
<div class="categorycta">
    <div class="comic-panel comic-left">
        <img src="http://lorempixel.com/340/220/">
    </div>
    <div class="comic-panel comic-middle">
        <img src="http://lorempixel.com/340/222/">
    </div>
    <div class="comic-panel comic-right">
        <img src="http://lorempixel.com/340/225/">
    </div>
</div>
</div>