Skip to content

[css-borders-4] How to draw triangles using corner-shape? #11846

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.

Sign up for GitHub

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

Jump to bottom
Closed
yisibl opened this issue Mar 6, 2025 · 4 comments
Closed

[css-borders-4] How to draw triangles using corner-shape? #11846

yisibl opened this issue Mar 6, 2025 · 4 comments

Comments

@yisibl
Copy link
Contributor

yisibl commented Mar 6, 2025 •
edited
Loading

In @LeaVerou's tool, the bevel value makes it easy to generate a triangle(left), but the current Chrome implementation(right) 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.

data:text/html;charset=UTF-8,<!DOCTYPE html>
<style>
div {
  corner-shape: bevel;
  border-radius: 100% 100% 0 0;
  width: 200px;
  height: 200px;
  background: hsl(320, 80%, 30%);
}
</style>
<div></div>

cc @noamr @smfr
@yisibl yisibl changed the title [css-borders-4] How corner-shape generates triangles [css-borders-4] How to draw triangles using corner-shape? Mar 6, 2025
@noamr
Copy link
Collaborator

noamr commented Mar 6, 2025

The left picture uses different radius constraints for bevel from the ones for round... Those constraints aren't spec'ed yet.

The following draws a triangle atm:

.bevel {
  background: rebeccapurple;
  border-radius: 200px 200px 0 0;
  width: 400px;
  height: 200px;
  corner-shape: bevel;
}

@yisibl
Copy link
Contributor Author

yisibl commented Mar 6, 2025

So currently it can only draw 45° - 45° - 90° triangles, is there a way to do isosceles triangles with other angles?

@tabatkins
Copy link
Member

@yisibl The example code you're using shouldn't be generating that triangle. Radius shrinking should make the bevel cover the same area that the rounded corner does in the "fallback", just cutting in halfway on each side. It looks like the tool just doesn't implement the shrinking properly; you can see it differs from the fallback in exactly the same manner even if set to "curve".

You definitely can make it cover the entire height, you just need a different value: 50% 50% 0 0 / 100% 100% 0 0 does it.

@yisibl
Copy link
Contributor Author

yisibl commented Mar 7, 2025

@tabatkins Sorry, I forgot the parameter after the border-radius slash.

@yisibl yisibl closed this as completed Mar 7, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@noamr @tabatkins @yisibl