Не могу получить: после того, как создать прямоугольную форму треугольника

Question

Я пытаюсь использовать css для создания фона, такого как желтый, на диаграмме.

Я провел некоторое время на эксперименты с использованием: после того, как, но я не могу получить треугольник в нужное место, и быть правая шириной.

Я не хочу использовать изображение, если могу использовать 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> 

И некоторые 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

фотографии моя скрипка: https://jsfiddle.net/r6er318z/

Я изменил ваш CSS немного

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; 
}