- From: 一丝 via GitHub <sysbot+gh@w3.org>
- Date: Thu, 06 Mar 2025 11:34:53 +0000
- To: public-css-archive@w3.org
yisibl has just created a new issue for https://github.com/w3c/csswg-drafts:
== [css-borders-4] How `corner-shape` generates triangles ==
In @LeaVerou's [tool](https://projects.verou.me/corner-shape/), the `bevel` value makes it easy to generate a triangle, but the current Chrome implementation doesn't work yet - is this a limitation of the current specification or an implementation issue?
Drawing triangles with CSS is a very common requirement, most commonly used for popovers for example.
<img width="300" src="https://github.com/user-attachments/assets/c1366c0f-5d07-4a12-8d41-654f147d856c"> <img width="200" src="https://github.com/user-attachments/assets/ba06552d-f8a0-46bc-95e1-3661e4e0dbb0">
```html
data:text/html;charset=UTF-8,<!DOCTYPE html>
<style>
div {
width: 200px;
height: 200px;
background: hsl(320, 80%, 30%);
corner-shape: bevel;
border-radius: 100% 100% 0 0;
}
</style>
<div></div>
```
cc @noamr @smfr
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11846 using your GitHub account
--
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Thursday, 6 March 2025 11:34:54 UTC