You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
bevel, scoop and notch introduce new interesting issues related to border radius constraining, and not just because we have to avoid the curves overlapping in the center; there are complexities around how the inner curves meet at over-constrained corners.
For example, here's an (almost) fully-constrained notch rendering:
Bump up the border-radius by a pixel, and the contents disappear:
If we don't do any constraining, then an even larger border-radius like border-radius: 49% will result in this:
and finally border-radius: 50% makes the box disappear entirely.
For scoop and notch it's less about obscuring the box content, and more about the complexities of the inner joins. Here's a "fully constrained" scoop:
where by "fully constrained" I mean the largest border radius where the inner arcs still meet at the inner border edge. Any more constrained, and arcs from adjacent corners intersect. bevel is similar.
However, some over-constrained renderings are desirable; it should be possible to make a sharp-pointed star with corner-style: scoop; border-radius: 50%. As an implementor I'm not relishing writing code to deal with inner shape intersections (don't forget that adjacent corners can have different corner-shapes), but it's probably doable. But what do we want?
The text was updated successfully, but these errors were encountered:
Is this any different than #11610?
The way I've dealt with this so far in the prototype is that the outer radius is slightly lower than the original (inner radius - border-width). This creates a situation where the shape is always painted inside the corner and the curvature is maintained (the formula is not complete yet in the codepen though, as for curvatures more concave than scoop additional adjustment is needed because of how the inner/outer paths work)
bevel
,scoop
andnotch
introduce new interesting issues related to border radius constraining, and not just because we have to avoid the curves overlapping in the center; there are complexities around how the inner curves meet at over-constrained corners.For example, here's an (almost) fully-constrained
notch
rendering:Bump up the border-radius by a pixel, and the contents disappear:
If we don't do any constraining, then an even larger border-radius like
border-radius: 49%
will result in this:and finally
border-radius: 50%
makes the box disappear entirely.For
scoop
andnotch
it's less about obscuring the box content, and more about the complexities of the inner joins. Here's a "fully constrained" scoop:where by "fully constrained" I mean the largest border radius where the inner arcs still meet at the inner border edge. Any more constrained, and arcs from adjacent corners intersect.
bevel
is similar.However, some over-constrained renderings are desirable; it should be possible to make a sharp-pointed star with
corner-style: scoop; border-radius: 50%
. As an implementor I'm not relishing writing code to deal with inner shape intersections (don't forget that adjacent corners can have different corner-shapes), but it's probably doable. But what do we want?The text was updated successfully, but these errors were encountered: