The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Pseudo Element gradients

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #41435

    Hi all,

    I’ve been working on a css ribbon using gradients instead of a border with pseudo elements, but I’ve come across something I just can’t get around. If you get the chance, [take a look at this pen I put together]( “”), in both Firefox and Chrome browsers. The issue I’m having is with the :after pseudo element. No matter how I adjust the degree of the gradient, or swap out the order of the colors, I can only seem to get it right on one browser or the other. Any suggestions?

    Andy Howells

    Setting :after’s gradient at 135deg works for me. (Chrome & Firefox). Can you take a screenshot of what you’re looking to achieve? I might be thinking you’re aiming for something you’re not.


    are you using the latest Firefox?


    Works on OS X 10.8.2 with FF 17.0.1

    Andy Howells

    @ChrisP – I think it’s just one of those shrug moments really, the code is fine so from what I can see it’s a browser bug, unless someone can see something I can’t?

    While not exactly an ideal fix, maybe an image/svg fallback as a solution?


    Very odd indeed. Though it’s a tad bit more code, you could just add the -moz- prefix after your `@include`, as such:

    &:after {
    @include background-image(linear-gradient(-45deg, darkgreen, green 50%, transparent 50%));
    background-image: -moz-linear-gradient(-45deg, darkgreen, green 50%, transparent 50%);
    right: 0;

    It will do the trick for Firefox, only thing I can think of really.

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.