Angled CSS background with bottom border. - html

Question

I'm trying to create a CSS background that looks like this:
I've been able to create the shape, but can't figure out how to add the bottom border, and am starting to think my approach may be the problem.
So far I have the following CSS:
#top-background-flag {
border-top: 2px solid #C2C2C2;
background: linear-gradient(
to bottom right,
#5DCAD3 50%,
transparent 50.5%
)
no-repeat bottom, /* bottom part */
linear-gradient(100deg, #5DCAD3, #5DCAD3) no-repeat top;
/* top portion */
padding-bottom: 3.5rem;
border-bottom: 2px solid #C2C2C2;
background-size: 100% 3rem, 100% calc(100% - 3rem)
}
and HTML:
<div id=top-background-flag>
A fun title
</div>
and a code pen: https://codepen.io/arel/pen/PKXGmd
My problem right now is that the bottom border is a horizontal line, and I can't figure out how to have it follow the angle of the box.
Here is what I have so far:

Answer 1

Trying to use a linear gradient may not be the best solution here.
Appending an object with a little CSS transformation some judicious layering will accomplish what you want and will have fewer properties to adjust if you want to change the angle later.
#top-background-flag {
border-top: 2px solid #C2C2C2; /* top border on the parent */
position: relative;
padding-bottom: 3.5rem;
overflow: hidden;
}
#top-background-flag:before {
background-color: #5DCAD3;
transform: skewy(-4deg); /* angle you want */
transform-origin: bottom left;
border-bottom: 2px solid #C2C2C2; /* bottom border skews with the object */
content: ' ';
display: block;
height: 100%;
width: 100%;
position: absolute;
z-index: -1;
bottom: 0;
}
Here is a working example to play with

Answer 2

Add this CSS to fake a bottom border:
#top-background-flag:after {
content: "";
background-color: red;
height: 2px;
width: 100%;
position: absolute;
left: 0;
bottom: 23px;
transform: rotate(-5.5deg);
}
Here is a working fork of your codepen: https://codepen.io/anon/pen/XaojPp

Answer 3

I'm not sure that this is what you are looking for, but you can use the :after pseudo class with the content trick:
body {
max-width: 500px;
}
#top-background-flag {
border-top: 2px solid #C2C2C2;
background: linear-gradient(
to bottom right,
#5DCAD3 50%,
transparent 50.5%
)
no-repeat bottom, /* bottom part */
linear-gradient(100deg, #5DCAD3, #5DCAD3) no-repeat top;
/* top portion */
padding-bottom: 3.5rem;
border-bottom: 2px solid #C2C2C2;
background-size: 100% 3rem, 100% calc(100% - 3rem);
position: relative;
}
#top-background-flag:after {
content: '';
border-bottom: 1px solid red;
border-top: 1px solid red;
position: absolute;
width: 100%;
bottom: 22px;
left: 0;
transform: rotate(-5.5deg);
}
<div id=top-background-flag>
A fun title
</div>