Forums

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

Home Forums CSS Curved Status Bar

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #46521
    whereismykit
    Member

    I would like to create a curved status bar like on this design
    http://netdna.webdesignerdepot.com/uploads/2013/06/ModusVersus_cover2.jpg

    I am talking about the status bar towards the bottom of the page 50 , 70, 80, 100

    I can create the status bar but not 100% sure how to create it curved like they have it.

    #143542
    saeed55sd
    Member
    #143577
    Paulie_D
    Member

    >I can create the status bar but not 100% sure how to create it curved like they have it.

    Without access to the actual template HTML & CSS we don’t know how they did it. **Images for all we know!**

    #143676
    DrCLue
    Member

    Could likely do that in a single element using the before and after pseudos with some thick red and green borders on two sides of each and the radius attribute. overflow clipped or such should do to hide the unwanted part of the circle and rotation should take care of the rest.

    you could likely style the meter element to look like that and then the attr() thing in the content property of the pseudo could respond to it auto magically

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