不能得到 :after 创建直角三角形

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

查看我的 fiddle：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;
}

不能得到 :after 创建直角三角形

Can't get :after to create right triangle shape

html

css

css-shapes