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

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

From: Lea Verou <lea@w3.org>
Date: Mon, 25 Mar 2013 00:31:23 +0200
Cc: www-style@w3.org
Message-Id: <922E823A-F45E-4DD9-8E96-8FE5666AE035@w3.org>
To: "L. David Baron" <dbaron@dbaron.org>
On Mar 25, 2013, at 00:18, L. David Baron wrote:

> 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.
It is, if you use an inset shadow, which is clipped by the outer shape.

> 
>> 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).
That reply is marked as correct and got a comment of "Yes!!! Thank you!" from the asker, so it's pretty obvious what he needed.

> 
>> http://stackoverflow.com/questions/14093619/make-cut-off-corners-with-a-border
> 
> No site or image.
There is both an image and a fiddle to demonstrate what he wants to do.

> 
>> 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.
It also has a link that points to an example of the effect he is trying to do.

> 
>> 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.
border-corner-shape works with border-radius and gets the angle from there. Itís entirely possible, with a smaller vertical radii than the horizontal one.

> 
>> 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).
Same as previous reply. border-corner-shape: bevel; does not only create 45 degree angles.

> 
>> http://stackoverflow.com/questions/7059597/slanted-corner-on-css-box
> 
> This is a demo rather than a site showing enough context.
A demo of the effect he is trying to accomplish...

> 
>> 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
> 
> Same.
> 
>> http://stackoverflow.com/questions/13545192/create-border-with-two-cut-off-corners
> 
> Same.
> 
>> http://stackoverflow.com/questions/10196072/css-border-shape-how-to-cut-off-rectangle-right-upper-corner
> 
> Same.
> 
>> http://stackoverflow.com/questions/11791947/styling-a-box-shadowed-element-with-cutoff
> 
> Image can't be done using the proposed feature.
It drastically simplifies it though. With border-corner-shape it would only need a small rectangular background image (which could be a gradient or a pseudo-element). Without it, itís much harder to do.

> 
>> 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).
So anything that is not as common as rounded corners isnít worthy of being added? I can think of several examples to the contrary. Sure, rounded corners are the most commonly needed type. But that doesnít mean other types arenít common. If anything, elliptical corners are far more rare than any of these effects, and yet, theyíre in.
Received on Sunday, 24 March 2013 22:31:48 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:21:07 GMT