Making a text <div> fit into a clip-pathed header image - html

Question

I have a header image which uses clip-path to make it's lower section angled like so:
CSS:
.angled {
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 96%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 96%);
}
I then apply this class to any div I want to become angled, which works, however for divs inside that class that contain text, the text does not fit to the newly shaped div. I would like it so the first line- the large title, fits neatly under the angle.
(note that with codepen, the video doesn't clip for some reason- it works fine locally- this isn't a concern)
Here is my codepen
.angled {
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 80%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 80%);
}
.angled-inverted {
-webkit-clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
}
header {
position: relative;
background-color: black;
height: 75vh;
min-height: 25rem;
width: 100%;
overflow: hidden;
}
header video {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: 0;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
header .container {
position: relative;
z-index: 2;
}
header .overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: black;
opacity: 0.5;
z-index: 1;
}
#media (pointer: coarse) and (hover: none) {
header {
background: url('https://source.unsplash.com/XT5OInaElMw/1600x900') black no-repeat center center scroll;
}
header video {
display: none;
}
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<header>
<div class="overlay angled"></div>
<video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop" class="angled">
<source src="https://storage.googleapis.com/coverr-main/mp4/Mt_Baker.mp4" type="video/mp4">
</video>
<div class="container h-100">
<div class="d-flex h-100 text-center align-items-center">
<div class="w-100 text-white">
<h1 class="display-3">Video Header</h1>
<p class="lead mb-0">With HTML5 Video and Bootstrap 4</p>
</div>
</div>
</div>
</header>
<section class="angled-inverted" style="background-color: grey; padding-top: -1rem; padding-bottom: 15rem;">
<div class="container-fluid" style="padding-left: 4rem">
<div class="row">
<div class="col">
<h1 style="font-size: 45pt">Angled Video Image</h1>
<p style="font-family:evogriaregular">The HTML5 video element uses an mp4 video as a source. Change the source video to add in your own background! The header text is vertically centered using flex utilities that are build into Bootstrap 4.</p>
<p>The overlay color can be changed by changing the <code>background-color</code> of the <code>.overlay</code> class in the CSS.</p>
<p>Set the mobile fallback image in the CSS by changing the background image of the header element within the media query at the bottom of the CSS snippet.</p>
<p>Set the mobile fallback image in the CSS by changing the background image of the header element within the media query at the bottom of the CSS snippet.</p>
<p>Set the mobile fallback image in the CSS by changing the background image of the header element within the media query at the bottom of the CSS snippet.</p>
<p>Set the mobile fallback image in the CSS by changing the background image of the header element within the media query at the bottom of the CSS snippet.</p>
<p>Set the mobile fallback image in the CSS by changing the background image of the header element within the media query at the bottom of the CSS snippet.</p>
</div>
</div>
</div>
</section>

Answer 1

clip path is not supported, is intended for images not for text,
if you set strict font size it can't change by itself,
padding cannot be negative,
unit pt shouldn't be used
and finally you spread css all around - external, inline arguing each other multi sub-layers
Any of the above cause problems.