Re: [css4-background] use cases for 'border-corner-shape'?

Good examples fantasai!

Here are a couple more examples on real websites:

Also, all the following common effects would be significantly simplified, if not completely solved:
- Ribbons, like the one I used in the top left corner of
- Page curl effects, like the one used in
- Triangles, rhombii, trapezoids, hexagons, octagons, crosses, arrows etc. Authors go to great lengths to make CSS triangles and trapezoids with borders, and this is all over the web.
- Tucked corners effects, like the ones used in
- Arrow-style buttons, similar to back buttons in iOS
- Many people mentioned photo galleries as a common use case they had for such corners

Using border-images for these is a pain, because:
a) The hit-testing area doesn’t change, as fantasai pointed out
b) box-shadow doesn’t follow them
c) You need to hardcode borders in the image, as you can’t have additional borders

Lea Verou
W3C developer relations ✿ @leaverou

On Mar 26, 2013, at 23:18, fantasai wrote:

> On 03/24/2013 03:50 PM, Lea Verou wrote:
>> I’ll try to find some additional good examples.
>> Elika, since you added the property, maybe you had some good existing use cases in mind?
> The major one for 'bevel' was to allow the shapes that are used in certain
> kinds of breadcrumb trails and tabs: some styles uses slanted tabs rather
> than curved-corner ones, and I've seen breadcrumb trails that look like
>  ____________________
> |     \       \       \
> |______\_______\_______\
> or
>   ____________________
>  | ... \  ... \  ...  \
>  |_____/______/_______/
> (Earlier designs of the Launchpad bug tracker did this, for example.)
> Another use case was to give shapes that would commonly allow the hit-testing
> (and background-painting) area to more closely approximate fancy-cornered
> border images.
> ~fantasai

Received on Tuesday, 26 March 2013 21:50:20 UTC