JSFiddle - React, Tailwind, and code Playground

by Wosley Bago

HTML

<div class="news-container news-container-col-2">
    
  <div class="news-container-split-container">
    <div class="news-container-split">
      <p>☺</p>
    </div>
    <div class="news-container-split">
      <p>☺</p>
    </div>
  </div>
</div>

CSS

.news-container {
  position: relative;
  width: 100%;
  height: 580px;
  padding: 40px 20px;
  box-sizing: border-box;
  text-align: center;
  /* Flexbox - use this to align content */
  display: flex;
  flex-flow: wrap column;
  align-items: center;
  justify-content: center;
}

.news-container.news-container-col-2 .news-container-split:nth-child(odd) {
  left: 0;
  right: 50%;
}

.news-container.news-container-col-2 .news-container-split:nth-child(even) {
  left: 50%;
  right: 0;
}

.news-container:before {
  content: '';
  position: absolute;
  z-index: -4;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url(http://az616578.vo.msecnd.net/files/2016/04/09/6359580807140768861266757027_Never-Study-Hard-The-Art-of-Studying-Smart.jpg);
  background-repeat: none;
  background-size: cover;
}

.news-container-split {
  position: absolute;
  z-index: -3;
  top: 0;
  bottom: 0;
  box-sizing: border-box;
  border: 20px solid transparent;
  border-bottom-color: #fff;
  padding-bottom: 20px;
  /* Flexbox - use this to align content */
  display: flex;
  flex-direction: wrap column;
  align-items: center;
  justify-content: center;
}

.news-container-split:first-child {
  border-left: none;
  padding-left: 20px;
}

.news-container-split:last-child {
  border-right: none;
  padding-right: 20px;
}

.news-container-split:before {
  content: '';
  position: absolute;
  z-index: -1;
  top: -20px;
  border: 10px solid #fff;
  border-bottom-color: transparent;
}

.news-container-split:nth-child(odd):before {
  right: -20px;
  border-left-color: transparent;
}

.news-container-split:nth-child(even):before {
  left: -20px;
  border-right-color: transparent;
}

.news-container-split:after {
  content: '';
  position: absolute;
  z-index: -3;
  top: -20px;
  left: 0;
  right: 0;
  bottom: -20px;
  opacity: 0.5;
  border: 20px solid transparent;
  border-bottom-color: #fff;
}

.news-container-split:first-child:after {
  border-left:...