Can't get :after to create right triangle shape [duplicate] - html

Question

This question already has answers here:
How to create a custom shape - css
(3 answers)
Closed 7 years ago.
I am trying to use css to create a background like the yellow in the diagram included.
I have spent some time experimenting with using the :after but I can't get the triangle into the right place, and to be the right width.
I don't really want to use an image if I can use css.
<aside class="quickcontactform">
<div class="quickcontactformheader">
<h2>Need help evicting a tenant?</h2>
<h3>Don't Delay</h3>
<p>Please complete the form below</p>
</div>
<p>'ere is more content sire</p>
<p>a be a pleased with it I am</p>
</aside></div>
And some css
.quickcontactform {
width:350px;
float:right;
background:#fff;border-radius:10px;
overflow:hidden;
}
.quickcontactformheader {
background:#f0cf35;
position:relative;
}
.quickcontactformheader:after {
content:'';
position:absolute;
bottom:0px;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
}

Answer 1

checkout my fiddle: https://jsfiddle.net/r6er318z/
I have modified your css a bit
HTML
<aside class="quickcontactform">
<div class="quickcontactformheader">
<h2>Need help evicting a tenant?</h2>
<h3>Don't Delay</h3>
<p>Please complete the form below</p>
</div>
<p>'ere is more content sire</p>
<p>a be a pleased with it I am</p>
</aside>
CSS
.quickcontactform {
width:350px;
float:right;
background:#fff;
border-radius:10px;
overflow:hidden;
}
.quickcontactformheader {
background:#f0cf35;
position:relative;
}
.quickcontactformheader:after {
content:'';
position:absolute;
top:100%;
width: 0;
height: 0;
border-left: 175px solid transparent;
border-right: 175px solid transparent;
border-top: 30px solid #f0cf35;
}