I've got a list of items which have a background image (via CSS) and some text. The simple markup is as follows:
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
etc...
</ul>
Imagine that each list item is a square. Is there an easy way to display these as a semi-circle? ie
[][]
[] []
[] []
Now to make this slightly more complicated there is one variable - the number of list items is unknown, so I need to work this out on the fly. I can work out the width each list item preety easily, so that it looks correct on the x-xis, I'm just having trouble with the y-axis.
Any help gratefully receieved.
Thanks for your time Sniffer
Your arch is divided up into item_count-1
slices, an entire circle is 2Pi radians, you are only using a semi-circle (1Pi). Divide the total (1Pi) by the number of slices (item_count) and multiply the Sin of that by the height of the arch.
in Javascript:
for(var i=0; i<item_count; i++){
var angle=Math.PI/(item_count - 1),
y=(1-Math.sin(angle * i))*arch_height;
//set the items CSS 'top' property to y
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.