Menu
I have a curved div created with css3 border radius (the image part). I have text lines next to it that I would like to align 20px or so off the curve, like so (cant post images, cant remember old login):
The trick is the curve changes depending on the window size, so I'd like to be able to calculate the points on the curve that the text should offset from, essentially creating a really manual text-wrap.
Ultimately I need to be able to calculate and update with javascript.
(edited to add per comment below): The curve css for purposes of demonstration is border-bottom-left-radius: 316px 698px; but that is calculated based on page size by a script. Also, good to mention, is I have no requirement to support IE or FireFox at all--just webkit (standalone kiosk application).
380
The border radius of the outer element should be equal to the sum of the border radius of the inner element and the distance between the two elements. This can be mathematically expressed as innerRadius + distance = outerRadius or more tersely R1 + D = R2 .
The border-radius CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners.
If there are contents within the div that has the curved corners, you have to set overflow: hidden because otherwise the child div's overflow can give the impression that the border-radius isn't working.
As suggested in comment by duri, you can use circle equation: http://www.wolframalpha.com/input/?i=%28x-5%29^2%2B%28y%2B4%29^2%3D25 (where center is in 5;-4 r=5)
However, I was using Bezier's Curves for drawing in Javascript. They are very flexible and consist or 2 vectors, the curve made by them starts in first vector's initial point and finish in second vector's. More: http://en.wikipedia.org/wiki/B%C3%A9zier_curve (Notice that for drawing part of the circle vector will be perpendicular)
81
Okay, I've played with it for a while. This is an early concept; it is somewhat inefficient, doesn't work with scrollbars and so far it works (more or less) only in Internet Explorer 9 and Firefox 5 (I didn't test other versions of these browsers). I skipped that mathematical stuff and did it another way - I use document.elementFromPoint to find out where the curve ranges. This is why it doesn't work in Chrome - its implementation of elementFromPoint doesn't respect border-radius (look at this example); hence I'll probably have to remodel the whole script. Nevertheless I show you what I created because it could be a good inspiration for another people who are willing to help you. I'll try to improve my script; I'll let you know when I make some progress.
The script can be found at http://94.136.148.82/~duri/teds-curve/1.html
20
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
