Re: [csswg-drafts] [css-backgrounds-4] the case for [css-corner-shape] 2022 edition (#6980)

ANGLE EXAMPLES
------------------------------
https://www.marvel.com/

![marvel](https://user-images.githubusercontent.com/1286791/150806731-f4177d2f-dacf-499b-8edf-1ed1ca61b711.png)

- call to action buttons: one with flat red, another with white border
- `:before` and `:after` used w/ border hacks
- corner-shape leads to considerably less code: `corners: angle 16px 0;`

https://www.zelda.com/ (footer links)

![zelda](https://user-images.githubusercontent.com/1286791/150806954-fcb9626a-14e2-48b9-84e3-1411c8918a55.png)

- this is the prototypical example of angled corners. All four corners with the same angle size.
- currently done with `:before` and `:after` `background-image`s on the left and right of the parent element. Similar to how we use to do rounded corners before `border-radius` was a thing.
- also includes a `border-radius`... Guessing this was intended as a fallback? but never got removed? This implies there were a couple of attempts at how to do this.
- corner-shape code is just a one-liner: `corners: angle 8px;`

https://metroid.nintendo.com/

![metroid](https://user-images.githubusercontent.com/1286791/150807305-b51e2426-5ebd-4202-9234-481131d0420c.png)

- long angle bottom edge and call to action buttons
- done with an absolute positioned inline SVG
- a little broken in Firefox
- long angle bottom edge `corners: angle 0 0 90% 10% / 0 0 70px 42px;`
- call to action buttons `corners: angle 16px / 100% 0;`

https://thewitcher.com/en/witcher3

![whitcher3](https://user-images.githubusercontent.com/1286791/150807570-be42f2bd-6ed4-48fd-ae6c-a71c473c8c85.png)

- corners: angle 28px 0 0 28px/ 50% 0 0 50%;

https://www.leagueoflegends.com/en-us/

![lol2](https://user-images.githubusercontent.com/1286791/150807915-6c582524-6e38-4a9c-a67a-22dd797c551d.gif)
![lol1](https://user-images.githubusercontent.com/1286791/150807929-c8e7e43b-12e9-4d3e-acde-ee1039045a89.gif)


- many different examples
- currently done with `canvas`
- many with hover animations that would be made trivial with corner-shape

```css
button{
 corners: angle 11px 0;
 transition: corners .25s;
}
button:hover{
 corners: angle 0 0;
}
```

https://www.xbox.com/en-US

![xbox](https://user-images.githubusercontent.com/1286791/150807852-32407628-b20b-47b2-a966-f61cecafe4bf.png)

- horizontal rule kinda thing
- appears to currently use an icon font
- corners: angle 9px 0 / 100% 0;

ANGLE AND NOTCH
------------------------------

https://playvalorant.com/en-us/

![val](https://user-images.githubusercontent.com/1286791/150807679-cee3070e-d9fc-4438-a0a0-8f32e2c515cf.png)

- angled corner bottom left, notched corner bottom right

- `border-radius: 0 0 95px 95px / 0 0 6px 54px;`
  `corner-shape: none none notch(?) angle;`

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


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

Received on Monday, 24 January 2022 15:08:16 UTC