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 inline the contents of an entire stylesheet with Wordpress?

    how to decrease the height of content area for

    with css?

    How to get and extract matched css rules on dom-node?

    How to apply an inner stroke to an image with just CSS?

    How to remove the blue border around ImageMap control in the Internet Explorer?

    How would use span to create different styles between selected characters and the rest?

    How To Make Entire 'li' Area and Text A Clickable Link

    How to make a parent --> node relationship in css?

    How to get Style From jQuery in angular2

    How to fix a element (have example) on the screen using jquery /css?

    How to make a div fill the entire page height using css? [closed]

    In IE Compat View, Developer tools shows elements “style” with the class of the previous element

    CSS: How to change class style if another style is hover

    How to show an image on html page using only css?

    How to make application browser compatible

    how to properly use css in jsf?

    How can i increase the round corner button width dynamically depends on the text size in CSS?

    How do I make this type of layout with CSS? [closed]

    How to put a
  • over an
    • How to set different body background color for different pages in one css files?

      How to make arc shapes with CSS3?

      How to get the navigation element to have horizontal lines after each nav element in css

      How to center nav using CSS/HTML? [closed]

      how to place the images exactly in menu position

      How to Flip Div's in Randomly

      How to float 3 divs with margin left & right 0px?

      How to remove space after div in my td when one div uses “relative” position?

      CSS only: how to make a div the width of its biggest row, with children as inline-blocks?

      HTML/CSS: How to create a box for the footer?

      How to define a good convention for css?