CSS triangle at bottom of div with gradient

Question

I've been fiddling with this for a couple hours now and I haven't gotten anywhere (other than figuring out what won't work) so I thought I'd ask.

Basically, I have a div with a 45 degree gradient. What I want to do is have the effect of a triangle "cutout" that cuts into the div below it. I've tried a few different things but the main problem seems to be that because the div spans the window, when the window is resized the size of the gradient is also changed. I went so far as to just hard code the color values into the triangle's gradient to make them match but obviously that broke when the window was resized. I had the same problem with the CSS border method of making triangles.

Attached is a screenshot of the div that I'd like to have the triangle below. It needs to be cross-browser.

screenshot

Is this something that can be done? Or do I need to abandon the idea and either change my gradient to a 90deg or forget about it all together?

Thanks!

@ImranBughio here's a link. It's rather simplified because my code was all local and I'm running Bootstrap and Wordpress. http://jsfiddle.net/EBWhg/ — anguiac7, Jun 17 '14 at 04:44
Can you provide an image of how you'd like to be? I couldn't picture it by your description. — gtramontina, Jun 17 '14 at 04:46
Do you want a triangle upside down, whose base is equal to to the width of the above div and same gradient? — Rai Ammad Khan, Jun 17 '14 at 04:50
@gtramontina Basically like this except matching the gradient of the div above exactly. http://imgur.com/LKBTC8d — anguiac7, Jun 17 '14 at 04:54
Is this what you're looking for: http://stackoverflow.com/a/19199893/1729885 ? — Niels Keurentjes, Jun 17 '14 at 05:08
This isn't the best solution but check this [DEMO](http://jsfiddle.net/EBWhg/7/) on Chrome.. — Imran Bughio, Jun 17 '14 at 05:37
@NielsKeurentjes This also worked for me. I'm going to have to compare and see which I like better. Thanks for your help! — anguiac7, Jun 17 '14 at 05:37

score 2 · Accepted Answer · answered Jun 17 '14 at 05:32

After much sweat I present to you this fully CSS example! Fully scalable!

Have a fiddle!

HTML

<div id="header" class="page-talk">
        <h1 class="page-title">talk</h1>
</div>

CSS

html, body {
    margin:0;
    padding:0;
}
div#header {
    height: 150px;
    width: 100%;
    background-image: -webkit-linear-gradient(45deg, #ff5071 0%, #5fd6e5 50%, #00ffab 100%);
    background-image: -moz-linear-gradient(45deg, #ff5071 0%, #5fd6e5 50%, #00ffab 100%);
    background-image: -o-linear-gradient(45deg, #ff5071 0%, #5fd6e5 50%, #00ffab 100%);
    background-image: linear-gradient(45deg, #ff5071 0%, #5fd6e5 50%, #00ffab 100%);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    z-index: 100;
}
h1.page-title {
    font-size: 6em;
    font-weight: 100;
    font-family:sans-serif;
    color: white;
    margin:0;
    margin-left:15px;
}
#header {
    position: relative;
}
#header:before {
    content:"";
    display: block;
    position: absolute;
    bottom: 0;
    width: 50%;
    left: 0;
    border-bottom: 20px solid rgba(255, 255, 255, 1);
    border-right: 20px solid transparent;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#header:after {
    content:"";
    display: block;
    position: absolute;
    bottom: 0;
    width: 50%;
    right: 0;
    border-bottom: 20px solid rgba(255, 255, 255, 1);
    border-left: 20px solid transparent;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

No worries, it was fun! :) Now, `box-sizing: border-box;` is the magic sauce for everything scaling correctly. [More information](http://css-tricks.com/box-sizing/). You may need to make small changes to make this compatible with older browsers. I would just ensure that it doesn't break terribly for older browsers and leave it at that :) — misterManSam, Jun 17 '14 at 05:39
Nice but in all these solution i find that the bottom color must be solid -- i.e we cant use a image which overlaps the white area on right - left of the arrow. — Imran Bughio, Jun 17 '14 at 05:45

score 0 · Answer 2 · edited May 23 '17 at 11:49

0

You could try the inverse of the triangle - 2 separate shapes in white at the bottom of your div to leave a gradient-coloured triangle. Something similar to the solution given for this other question:

Achieve this background (see pic) with css

edited May 23 '17 at 11:49

Community

1
1

answered Jun 17 '14 at 05:05

DJ_Polly

434
3
12

CSS triangle at bottom of div with gradient

2 Answers2