Re: [csswg-drafts] [css-backgrounds-4] Use cases for corner-shape (#6980)

https://www.minecraft.net/en-us/about-dungeons

![Screenshot 2023-01-06 at 14-28-02 Minecraft Dungeons Play on PC console   cloud](https://user-images.githubusercontent.com/1286791/211404469-812a3985-9d94-482b-a40f-0ba4eff8d22f.png)

a super straight forward notch example with a gradient background. Could have been a clip-path but isn't. Currently done with fixed height pseudos on either side of the main element.

-----------------------------------------------------------

https://www.zelda.com/tears-of-the-kingdom/

![Screenshot 2023-01-02 at 16-33-35 The Legend of Zelda™ Tears of the Kingdom for Nintendo Switch™ – Official Site](https://user-images.githubusercontent.com/1286791/211405267-2de3b8ec-cf29-4346-be92-526420db9f82.png)

almost certainly a straight up image situation like it's currently done but it's the first instance I've seen of a `double` border around an general `corner-shape: angle;`.

----------------------------------------------------------------

https://octopathtraveler2.square-enix-games.com/en-us/

![Screenshot 2023-01-03 at 12-12-42 OCTOPATH TRAVELER 2 for PlayStation Nintendo Switch and Steam SQUARE ENIX](https://user-images.githubusercontent.com/1286791/211405655-8674ac84-e188-4900-961f-82b3bfbe4a14.png)

We have a basic solid bordered element overlay-ed with a bunch of absolute positioned presentation-al span elements. Each with 2 borders (ie one with border-top and border-right another with border-bottom border-left etc). Positioned to get the continuous notched look. Very fiddly but it certainly works.

`corner-shape` would allow this to be a regular `border: solid etc;` element with a `corner-shape: notch;` pseudo element with border as an overlay.

to be fair this could also be a good use for `border-image`

-- 
GitHub Notification of comment by jsnkuhn
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6980#issuecomment-1376301250 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 9 January 2023 20:55:06 UTC