不能得到：創建正確的三角形後

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