[css-shapes-2][css-borders-4] Add a way to change an element's shape

[SebastianZ]

@LeaVerou mentioned an element-shape property in #6980 (comment) as a way to influence the shape of an element. The idea behind that property is to change the shape of the element so that border, shadows, etc. follow that shape.

So far we have the shape-outside property which influences the float area. I suggest to extend this property to be able to specify that it not only affects the float area but also all the other boxes created for the element.

Sebastian

[jsnkuhn]

this issue about trying to get borders etc to play nice with clip-path seems related: #5881

[bradkemper]

I think we should either extend shape-outside or clip-path or both. Probably clip-path would make more sense, since it is already creating a background shape, and we want it to also create a border shape. Whether it is floated via shape-outside is related, but maybe less relevant.

I was thinking it could be a keyword we add to those properties, as in clip-path: circle(50%) border-shape. When that keyword is added, it would mean that you would get the border-top value and use it to stroke the inside of the shape and making the padding box that much smaller if it has box-sizing: border-box, or stroking the outside of the shape if it has box-sizing: content-box. The stroke would affect layout, much like a regular border. The border would not be clipped by its own clip-path. The normal rectangular border would not be added. We would in effect be creating a shaped border-box that is used for box-shadow and filters. Those filters and box-shadows would not be applied to the normal rectangular border-box, just to the stroked shape.

[bradkemper]

Also, add clip-path as a keyword value of shape-outside, so that shapes only have to be defined once, in the clip-path property, and used to also define the path of shape-outside.

[faceless2]

Big +1 to Brad's comments. We have shape-outside and clip-path already, they should be reused rather than adding another definition of the shape-of-a box. The clip-path value to shape-outside is also a good (and probably overdue) idea.

[jsnkuhn]

with the reuse of a clip-path like syntax in mind clip-path already has an inset() option right now that allows for a round option similar to border radius. So it seems like things are already primed to be extended for corner-shape

clip-path: inset(20px round 10px)

does fell a bit strange hiding the corner-shape-ing just inside inset() though.

wonder if something like corners(angle round round 50%); could be used to make the corners thing less of an after thought here.

[jsnkuhn]

would it theoretically in anyway be feasible to get border-image to follow an element-shape path? Like down the left side of this text box?

[SebastianZ]

with the reuse of a clip-path like syntax in mind clip-path already has an inset() option right now that allows for a round option similar to border radius. So it seems like things are already primed to be extended for corner-shape

Any solution found here needs to define how to deal with border-radius and corner-shape.

If we end up with extending clip-path for that, we might close this issue in favor of #5881. But we'll see.

Sebastian

[SebastianZ]

Btw. just referencing #2180 in regard of the clip-path value for shape-outside.

Sebastian

[jsnkuhn]

I don't really think giving clip-path the ability to have borders/box-shadows etc is the right way to go here. clip-path is already doing what it's intended to do i.e clip a path. It makes more sense to for there to be a separate property to deal with the creation of an element shape.

There are plenty of existing use cases of having a rectangular shape that is revealed with a clip-path animation. No reason folks wouldn't want to do the same thing with non-rectangular shapes. If you are already using clip-path for the elements shape how would it be possible to reveal the element with a clip-path animation?

https://codepen.io/jsnkuhn/pen/BaryjEV?editors=1100

[jsnkuhn]

Ran across this page with lots of interestingly shaped elements: https://atlus.com/persona5/home.html