[css-box-model] container shape property

[excitedbox]

Summary: Instead of using Rectangular box containers and complex formatting rules to define content alignment defining a container as a polygon allows simpler content control. Much like clipping path is used for images it would extend the use to text and alignment. Many complex content alignments would currently require using svg (you loose text highlighting etc.) or complex computed alignment and transform rules.

Functionality: Define a container in the shape of a polygon to control content and element alignment, overflow, wrapping etc.

Use Cases:

• IOT and Mobile devices with non rectangular displays (Smart watch, Human Machine Interfaces, Picture frames, etc)
• Content alignment on a smart watch
• IOT devices are slowly adopting JS and CSS GUIs and layout controls may need to be aligned in different configurations as on a PC or mobile phone
• A triangular container would allow formatting text in a pyramid shape.
• A Crescent shape could be used to align navigation buttons in an arc.
• Displaying text with a circle shape through wrapping or overflow control
• Reducing the number of alignment commands needed in animations and transforms (a wave, circle, rhombus shaped container would only need v and h alignment changes to animate several motions)