W3C home > Mailing lists > Public > www-style@w3.org > March 2013

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

From: L. David Baron <dbaron@dbaron.org>
Date: Sun, 24 Mar 2013 15:18:03 -0700
To: Lea Verou <lea@w3.org>
Cc: www-style@w3.org
Message-ID: <20130324221803.GA32698@crum.dbaron.org>
On Sunday 2013-03-24 23:14 +0200, Lea Verou wrote:
> Googling these is pretty hard, as everybody uses different names to refer to them. Nevertheless, here are a few tutorials and questions from struggling authors about how to replicate these effects:
> bevel
> --------
> http://stackoverflow.com/questions/6474168/how-do-i-make-corners-angled-like-this-using-css

Not achievable using the proposal because of the way the shadow
lines up.

> http://stackoverflow.com/questions/10349867/how-do-i-bevel-the-corners-of-an-element

No site or image (other than a link to your demo/tutorial, which
isn't a use case).

> http://stackoverflow.com/questions/14093619/make-cut-off-corners-with-a-border

No site or image.

> http://stackoverflow.com/questions/8854457/css-only-cross-browser-clipped-corners

This has only sample code, not a real-site context, so it's not
possible to tell if the feature would serve the real use case.

> http://stackoverflow.com/questions/9300692/how-to-make-a-rounded-corner-rectangle-with-a-cut-corner-using-css

Not achievable using the proposed feature because the line is not at
a 45 degree angle.

> http://stackoverflow.com/questions/2767150/how-to-give-transparent-hexagon-angle-at-the-last-li-only

> http://stackoverflow.com/questions/8986545/css3-one-of-the-div-corners-should-inwards

Same as previous (not 45 degree angle).

> http://stackoverflow.com/questions/7059597/slanted-corner-on-css-box

This is a demo rather than a site showing enough context.

> http://stackoverflow.com/questions/14418309/clipping-or-chamfering-corners-of-image-to-see-background

Again, no site context.

> http://stackoverflow.com/questions/7324722/cut-corners-using-css


> http://stackoverflow.com/questions/13545192/create-border-with-two-cut-off-corners


> http://stackoverflow.com/questions/10196072/css-border-shape-how-to-cut-off-rectangle-right-upper-corner


> http://stackoverflow.com/questions/11791947/styling-a-box-shadowed-element-with-cutoff

Image can't be done using the proposed feature.

> http://stackoverflow.com/questions/15148421/div-background-shadow-to-fit-custom-css-shape

I can't actually see the shadow well enough to tell what shadow
behavior is intended and whether it's what would result from the
proposed feature.

etc.  etc.

To be clear:  when we added border-radius, it was pretty easy to
find sites simulating rounded borders using images (typically a grid
of images in tables).

If we want to add similar features, it should be equally easy to
find such sites.  Otherwise we should just tell authors who want
effects like these to use border-image (possibly with SVG).

We should also lean towards adding features with more power rather
than adding more specialized features.


𝄞   L. David Baron                         http://dbaron.org/   𝄂
𝄢   Mozilla                           http://www.mozilla.org/   𝄂
Received on Sunday, 24 March 2013 22:18:26 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:39:09 UTC