Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[css-backgrounds-4] Extruding border corners (negative border-radius) #2811

Open
Meteor0id opened this issue Jun 23, 2018 · 6 comments

Comments

Projects
None yet
4 participants
@Meteor0id
Copy link

commented Jun 23, 2018

Just leaving a quick thought here, think it might be worth exploring further.

We can currently give a corner a border-radius, giving us rounded borders. But what if we don't want them rounded, but rahter want them extra spiky?

This could be used just to create some fun spiky corners, or it could be used to create interior corners. these interior corners were the main motivation behind this suggestion.

Here an example of how a new setting with some kind of negative ratio could be used to create the illusion of a nagative corner between two divs.
This is only a quick initial thought, exploring this further to a point where it could enter a draft will take much more, but let's start somewhere.

css_draft_neg_border_radius

@nigelmegitt

This comment has been minimized.

Copy link

commented Jun 25, 2018

See also w3c/ttml2#189 for a real world example where interior corners would be useful; in that case they cannot necessarily be defined at authoring time because the direction of the corner rounding depends on the length of adjacent line area backgrounds, so a more dynamic run-time decision is needed.

@fantasai fantasai changed the title [CSS Backgrounds and Borders Level 4] Extruding border corners (negative border-radius) [css-backgrounds-4] Extruding border corners (negative border-radius) Jul 24, 2018

@fantasai

This comment has been minimized.

Copy link
Collaborator

commented Jul 24, 2018

@nigelmegitt Wow. That TTML issue... it totally makes sense what you want to do, but actually doing it seems crazy from the model we have! Not only do we have to automatically flip the curve based on the location of sibling boxes (which sibling boxes?) but also truncate the radii to create a tighter S-curve if the edges of two boxes are too near each other...

@nigelmegitt

This comment has been minimized.

Copy link

commented Jul 26, 2018

@fantasai I agree, there are two things to think about here:

  1. The general model for background areas and how they interact with layout
  2. The specific computation for this use case.

General model

Thinking about the general model first, I think a way that could work here is:

  1. Background constraints are pre-applied prior to layout (*)
  2. Layout generates foreground content
  3. Background is computed based on locations of boxes generated by layout
  4. Background layer is inserted at appropriate z-index
  5. Layers are drawn in order from lowest z-order to highest z-order

* In step 1 I am referring to things like line padding, that affect the available space for layout. For example, if line padding is specified as 10px at the beginning and end of every line, then we can subtract 2*10 = 20px from the available inline size prior to layout, and offset the alignment basis point by 10px in the appropriate direction (or 0px if centre), then do layout, and then in step 3 we can safely create a background box that is 10px bigger than the line box at either end.

In step 3, since the background instructions are all known, if there is additional "clever" stuff to do like setting corner rounding and corner rounding axes, or combining areas into complex polygons, then the information should be available to allow that to happen, and cannot affect foreground layout.

Specific computation for this case

I'm not sure the best mathematical approach to take but it seems to be known art, in that there are drawing tools (for example) that can combine multiple rectangles into complex polygons and apply vertex effects.

@tabatkins

This comment has been minimized.

Copy link
Member

commented Jul 26, 2018

This is definitely known art; there's nothing theoretically difficult about drawing such a border curve around intersecting rectangles.

But yeah, as @fantasai said, this is dramatically different from our current model, both in details and in broad strokes. It's probably not realistic to make this sort of thing happen in native CSS.

That said, it's a pretty perfect example of something that can be done via Custom Paint.

@nigelmegitt

This comment has been minimized.

Copy link

commented Jul 27, 2018

needs to go and read more about CSS backgrounds

@Meteor0id

This comment has been minimized.

Copy link
Author

commented Jul 27, 2018

@fantasai
Flipping the curve based on the location of sibling boxes was never my suggestion. Although my example shows a use case whith two bordering boxes, box 2 is completely out of the scope of the preposed feature.

Creating interior corner effect has to be done with the knowledge that one box will expand further than the other.

Or both boxes might be set to a border-box, be contained by the same partent, and both have min-height: 100%;. In such case the height of a box should be computed as the furthest extending corner.

I think the TTML issue which @nigelmegitt brought forward has more complexities than what I initally preposed for CSS.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.