Can't get :after to create right triangle shape

Question

I am trying to use css to create a background like the yellow in the diagram included.

enter image description here

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

This might help: http://code.tutsplus.com/tutorials/how-to-create-diagonal-lines-with-css--net-20763 — odedta, May 26 '15 at 09:58
yes, you're right they are after the same shape - but how to find that one among the many, many vague titles??? — maxelcat, May 27 '15 at 08:20

score 2 · Accepted Answer · answered May 26 '15 at 10:01

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

Thanks Nilesh - perfect (and obvious too when you know how!) — maxelcat, May 27 '15 at 08:25

Can't get :after to create right triangle shape

1 Answers1