How to create a circle with text coming out of it like rays [closed]


Tags: html,css,circle

Problem :

I'd like to have a circle, with rays coming out of it... Around 24 of them. With each ray being a rectangle with a word in it. So it's basically a menu in a website, but instead of being in a column on the side of the page, here it's around a circle. Each rectangle is evenly separated from the others of course, forming something that looks like a sun.

Can anyone show me how I can do that with HTML/CSS? Javascript and JQuery can be used too if needed.



Solution :

Something like this fiddle?

In the fiddle I use a javascript loop to set all the angles, but it could also be static css if you knew ahead of time how many rays there would be:

.ray {
    position: absolute;
    left: 50%;
    width: 200px;
    top: 40px;
    bottom: 40px;
    padding-left: 10px;
    transform-origin: 0px 50%;
}

#ray1 {
    transform: rotate(0deg);
}

#ray2 {
    transform: rotate(72deg);
}
...

(naturally for real-world code you'd want to use the -webkit, etc prefixes for the transform properties; another nicety of using jquery is that it deals with that automatically)


    CSS Howto..

    How to design this html Box for legacy browsers

    how to make background css url dynamic using jquery

    How to use Javascript to get a visitors monitor resolution?

    how should i set scrollbar properties in css

    How To Put Values Dynamically

    How to combine html, js and css from fiddle

    How to make the bootstrap button,when clicked to redirect to a specific page

    How to check if the flash message set is empty in cakephp

    How can i stop my text css from over-riding my form on my blog?

    How do I get an element to always occupy a specific percentage of its parent element, even when the browser is resized?

    How do I display a randomly generated list in columns with CSS?

    How to block CSS and js file loading in Google Blogger template?

    How to include google search result in my specified div width and height?

    How to make divs have table-like borders?

    How to change button CSS attributes

    How to fade out and fade in the divs sequentially

    How to keep the navbar fixed to top in big screens only using jquery

    How to truncate paragragh lines in css [duplicate]

    How JQuery can parse colors in text?

    How to use Chrome Inspector to show the popup css for a jquery plugin

    How to add css 3dtransform property with jquery to a dom element?

    How to center smaller text with bigger css

    Using CSS, how can I make my document expand to the user's viewport if the content doesn't scroll?

    Responsive website - how to debug a non-responding responsive css?

    Understanding how menus work in html5 and css3

    How to remove the css class

    How do I create a region/zone map for the web? [closed]

    How do I grey out the default text of a text box?

    In CSS: how to specify the font you want as being BOTH monospace and sans-serif?

    How to change visibility of a div css to visible with jQuery