Menu
i seem to be lost how to mark up phrases list (named title1, title2, title3, etc on the attached image) in semicircle form. Maybe there is easy css crossbrowser solution (no-no, no IE6, ha-ha), or i need to use javascript? I can't insert it as image, because i have a requirement that all text on the page should be real text.
Or maybe there is some Jquery plugins that could solve such issue..
Thanks in advance!
593
You could use border-top-left-radius and border-top-right-radius properties to round the corners on the box according to the box's height (and added borders). Then add a border to top/right/left sides of the box to achieve the effect.
The box and half circle can be created with a div tag. The circle can be clipped to show the left part only. The text letters can be rotated.
A Semi-Circle or a Half-Circle shape can be easily created using HTML and CSS. We will use the border-radius property to draw the desired output. HTML Code: In this section we will create a simple “div” element using the <div> tag.
I would use JavaScript and some simple math to calculate the position of each title. The formula for the x and y position on a circle is the following:
x = radius * cos( angle )
y = radius * sin( angle )
So using this, you can calculate the position of each title:
elem.style.left = radius * Math.cos( angle ) + "px"; // angle in radians
elem.style.top = radius * Math.sin( angle ) + "px";
I have made a demo fiddle showing this: http://jsfiddle.net/eGhPg/
166
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
