hexagon button with border-radius and border using trigonometry
I'm trying to make a perfectly customizable hexagonal button using just css. So far I still have to use 2 magic numbers for
height and translateX. I dunno what's wrong with my math <:pepo_cry:804221412172365834>
https://play.tailwindcss.com/1gE4l0GgpT?file=cssTailwind Play
Tailwind Play
An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.
36 Replies
I give up, I think I'm fighting subpixel aliasing https://play.tailwindcss.com/GD70a5pOaw?file=css
Tailwind Play
Tailwind Play
An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.
@phyrasaur this is another use case for the hopefully up coming
corner-shape property. Feel free to drop the example in this thread: https://github.com/w3c/csswg-drafts/issues/6980ohhh noice
how about merging the ability of 
border-image to slice with corner-shape 
Tailwind Play
Tailwind Play
An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.
Another fancy corner
https://play.tailwindcss.com/PbYydTbZlq
Tailwind Play
Tailwind Play
An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.
but ^ this one is mostly tailwind
Here's a paint api demo of the basic
corner-shape idea. You can inspect to edit corner-size and corner-shape as custom props. Works best on chrome at the moment since no other browser natively supports paint() yet.... Just a warning that there's a crashing bug in chrome right now that you might run into.
what do you mean by "border-image to slice with corner-shape"oh forgot the link https://jsnkuhn.github.io/corner-shape/
CSS corner-shape Paint API polyfill
A demo of what CSS corner-shape could be/do with the Paint API.
oh, I thought chrome has supported it?
Viber services to promote your business
Learn more about Viber for Business products and offerings: advertising, stickers, chatbots and Business Messages. Viber for Business is a powerful solution for brands, businesses and companies of all sizes.
they use
paint()
for the squircle CTAchrome vs ff
Rather than just 4 corners, we can customize the border sides? Like for a border-image we can slice an image into 9 parts for 4 corners, 4sides and 1 center
imagine if we can do
side-inline-radius or something and do this easily
btw, I wish polygon can has a third argument for each coordinate for vertex radius 
For now the closest is to use
path, imagine if we can use polygon to make something like this
https://stackoverflow.com/questions/24771828/how-to-calculate-rounded-corners-for-a-polygonStack Overflow
How to calculate rounded corners for a polygon?
I'm looking for an algorithm that allows me to create rounded corners from a polygon.
I have an array of points that represents the polygon (outlined in red) and on output I want an array of points...
all vector programs have it
but it's not easy to do it on the web
yep, chrome has supported
paint() for ages but they made some change in v 111 that's breaking some of them. They are working on a fix.
thanks for the https://www.forbusiness.viber.com/en/ link that's the first live squircle i've seen.
since this involves more than just corners corner-shape isn't really what you'd want here really. There has also been converstion about an element-shape property that would use the same css shapes as clip path
feel free to open an issue on https://github.com/w3c/csswg-drafts/issues I don't think that's a thing that has been proposed yetohh,
element-shape sounds nice
btw url(#clipPath) doesn't work with clipPathUnits="objectBoundingBox"
or else it would be easy to make an svg based clip-path that's responsive
Actually I'm just a designer. The impostor syndrome is at stake here you reminded me that I was asked to open a similar issue a while back. So it's here now: https://github.com/w3c/csswg-drafts/issues/8883. If you have a github account it would be nice to have a thumbs up. Would you mind if I included your example from above?
Feel free to use it! Done thumbs up 👍
I don't even have a repo just an empty account 😅
Smol update, ff doesn't like rotated clip-path. I forgot the same effect that I want with clip-path can be achieved using background-clip: padding box
https://play.tailwindcss.com/6DHIqIBcLE?file=css
Tailwind Play
Tailwind Play
An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.
beyond the very basics
clip-path is kinda of a mess right now. It's on Interop2023 so should hopefully get cleaned up this year. https://wpt.fyi/interop-2023?feature=interop-2023-cssmasking (it's under masking). Not sure if there's a specific test for objectBoundingBox. You'd have to have a look.GitHub
wpt/clip-path-userspaceonuse-001.svg at master · web-platform-tests...
Test suites for Web platform specs — including WHATWG, W3C, and others - wpt/clip-path-userspaceonuse-001.svg at master · web-platform-tests/wpt
we need to use decimal to denote percentage to use it in css
Thank you!
I think I want to experiment with something
Tailwind Play
Tailwind Play
An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.
okay it worksss
sorry for bothering you
so now I need to figure out how to make rounded corners for a hexagon using js
I didn't read to the end 
okay but why
path() cannot take decimals? am I doing something wrong?
https://play.tailwindcss.com/ZYRC2IZRgV?file=cssTailwind Play
Tailwind Play
An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.
I copied it directly from MDN https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path#syntax
clip-path - CSS: Cascading Style Sheets | MDN
The clip-path CSS property creates a clipping region that sets what part of an element should be shown. Parts that are inside the region are shown, while those outside are hidden.
all tests for
clip-path: path() (that I think is relevant?) don't use decimals https://github.com/web-platform-tests/wpt/blob/master/css/css-masking/clip-path/clip-path-path-003.htmlGitHub
wpt/clip-path-path-003.html at master · web-platform-tests/wpt
Test suites for Web platform specs — including WHATWG, W3C, and others - wpt/clip-path-path-003.html at master · web-platform-tests/wpt
if I can do 
I need I cannot
but isn't that because
clip-path: path() with decimals to denote percentages of the element's size, that would be the best
right now I'm happy enough that I've found out I can use clip-path: url(#clipPath) with clipPathUnits="objectBoundingBox" using decimals I need path() to work with decimals
so that I can use calc() inside ittttt
arghhhh
or rather than decimals, make it like polygon and the rest, we can use percentages?
because I need fixed values for the left and right to be a specific size while the middle is relative percentages so that it takes up the whole element
can I use calc() inside <path d=""? I cannot
but isn't that d can be manipulated with css? because d value is a <string>?
polygon is not
I need
path to be able to accept percentages 😭made a 1px half hexagon in figma so that I don't have to convert the values to decimals myself 😂
https://play.tailwindcss.com/yjdbbW9rEO?file=css
Tailwind Play
Tailwind Play
An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.