CSS: Triangle indicator in color-divided div - html

Question

I am trying to create a div that is two different colors, split horizontally, with an angled(triangle) divider/indicator that points from the left side to the right side. This is the mockup I got:
I found a guide for making something very similar here (the 'Talk Bubble' example):
https://css-tricks.com/examples/ShapesOfCSS/
and here I found an example for creating a bi-colored div:
CSS: Set a background color which is 50% of the width of the window
I have a CodePen here with what I've got, and I'm just struggling a little bit to put the pieces above together to meet the mockup. I'm trying to make sure that the angled indicator is a maximum of 100% of the height of this div, as it will be with other similar divs of other colors and I don't want overlapping edges.
https://codepen.io/chjaro/pen/MGmLxb?editors=1100
#cs-results>#csBullets {
text-align: justify;
margin: 0 auto;
width: 40em;
padding-left: 100px;
font-size: 24px;
}
#csBullets>ul>li {
list-style: none;
color: #fff;
}
#csBullets>ul>li::before {
content: "\2022";
color: #188ac5 !important;
position: relative;
top: 0em;
padding-right: 10px;
}
#csTitle {
color: white;
font-size: 48px;
margin: auto;
max-width: 75%;
padding: 20px 0 50px 0;
}
#cs-what-we-did {
height: 400px;
background: linear-gradient(90deg, #9fa0a2 40%, #58595B 40%);
z-index: -3;
margin: 0;
padding: 0 20%;
}
#csBullets {
/* background-color: #9fa0a2; */
height: 400px;
margin: -9% 0 -10% 0;
padding: 8% 0
}
#csBullets:after {
content: "";
position: absolute;
left: 66%;
top: 0;
width: 0;
height: 0;
border-top: 175px solid transparent;
border-left: 150px solid #9fa0a2;
border-bottom: 200px solid transparent;
z-index: -1
}
#media screen and (max-width: 990px) {
#csBullets:after {
display: none !important;
}
#cs-what-we-did {
height: 100%;
background: linear-gradient(90deg, #9fa0a2 50%, #58595B 50%);
z-index: -3;
}
#csBullets {
height: 100%;
}
}
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="cs-what-we-did" class="col-lg-12 container-fluid cs-single">
<div class="sectionTitleBar">
<h2 class="sectionTitle" style="color: #fff;">Section Title</h2>
</div>
<div class="col-md-6" style="" id="csBullets">
<h3 class="sectionTitle" style="color:#fff;">Goals</h3>
<ul>
<li>Placeholder</li>
<li>Placeholder</li>
<li>Placeholder</li>
<li>Placeholder</li>
</ul>
</div>
<div class="col-md-6" style="z-index: -1">
<h3 class="sectionTitle" style="color:#fff;">Results</h3>
<p style="text-align: left; color: #fff">Placeholder placeholder placeholder placeholder placeholder placeholder placeholder placeholder placeholder placeholder placeholder placeholder placeholder.</p>
<p style="text-align: left; color: #fff">“Placeholder placeholder placeholder placeholder placeholder ,” Placeholder says. “Placeholder placeholder placeholder placeholder placeholder placeholder placeholder placeholder placeholder placeholder placeholder placeholder placeholder placeholder
placeholder placeholder placeholder placeholder placeholder placeholder.”</p>
</div>
</div>

Answer 1

I would take a different approach to this and just use absolutely positioned pseudo elements to create the elements for the angle, then transform them to get the shape you want. After that you use some z-index magic to keep it behind the content in case of overlap. This way it'll always be relative to the container itself, so it'll work regardless of the container's height.
.container {
width: 100%;
display: flex;
overflow: hidden;
position: relative;
}
.title {
position: absolute;
top: 20px;
left: 0;
right: 0;
margin: 0;
text-align: center;
z-index: 3;
}
.left,
.right {
flex: 1;
padding: 50px 60px 20px;
}
.left {
z-index: 2;
background: gold;
}
.right {
background: tomato;
position: relative;
z-index: 1;
}
.right::before,
.right::after {
z-index: -1;
content: "";
background-color: gold;
position: absolute;
width: 50%;
right: 100%;
}
.right::before {
top: 0;
bottom: 48%;
transform: rotate(-15deg);
transform-origin: top right;
}
.right::after {
bottom: 0;
top: 48%;
transform: rotate(15deg);
transform-origin: bottom right;
}
<div class="container">
<h1 class="title">Lorem ipsum dolor sit amet.</h1>
<div class="left">
<h1>Lorem ipsum.</h1>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, recusandae.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus assumenda sit cupiditate facere, nihil temporibus.</li>
</ul>
</div>
<div class="right">
<h1>Lorem ipsum.</h1>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, recusandae.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus assumenda sit cupiditate facere, nihil temporibus.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus assumenda sit cupiditate facere, nihil temporibus.</li>
</ul>
</div>
</div>