无法获得：创建直角三角形后

Question

我正在尝试使用css创建一个背景，如图中包含的黄色。

我花了一些时间尝试使用：after但我无法将三角形放到正确的位置，并且是正确的宽度。

如果我可以使用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;
}