Forums

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

Home Forums CSS "Starburst wheel" with faded ray gradients in pure CSS

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #247125
    billdami
    Participant

    I am attempting to create an animated “starburst wheel” in pure CSS. Here’s what I have so far:

    http://codepen.io/billdami/pen/qaGNRm

    The intended effect is a circle with triangular spokes/rays expanding out from the center, like I have there, but also have the rays be gradients, whose alpha transparency fades out to 0% at the outermost edge (something like this), and that is the part I can’t figure out.

    I went with the border-width trick to create the triangles as there doesn’t seem to be any other real way to create triangles with pure css/html (maybe clip paths?), and I was then going to use border-image to add a gradient to it, but that doesn’t work because you can’t apply a border image to only one side.

    Any ideas or suggestions?

    edit: clip-path looks like its out as it has no IE support at all…

    #247133
    Shikkediel
    Participant

    When you use an SVG, IE does support a clip-path:

    Mozilla doc

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