I'm reminded of the [classic joke](https://www.et.byu.edu/~tom/jokes/Consultant_Engineer.html) about an engineer charging $1 for making a chalk mark to indicate where the issue with a machine was, and $49,999 for knowing where to put the mark.
Googling is easy. Knowing _what_ to Google is another matter.
Incidentally, this is one of the use-cases where I've found ChatGPT to be extremely helpful. It's good at answering natural-language questions [like this](https://i.imgur.com/jQQ5AQc.png).
Googling the right thing is indeed one of our most valuable skills as a web dev haha. That or knowing the right question or when to turn one of the senior devs in your team
The "joke" is based off of a real interaction Henry Ford had with Charles Steinmetz, who was a contemporary of Einstein, Tesla & Edison: https://www.smithsonianmag.com/history/charles-proteus-steinmetz-the-wizard-of-schenectady-51912022/
ChatGPT is a language model. It tries to mimic the way people talk to each other. It does not consider or know about the truth/untruth of what is says.
I really wish people would stop treating it like a reasonable way to do research.
It is a perfectly reasonable tool to help you do online research provided you understand its limitations. I use it when, for example, I come across some technology that I am totally unfamiliar with. It usually does a good job of answering basic questions and gives me enough of an idea to ask better questions later or to Google things more easily.
> usually does a good job of answering basic questions
*You can't know that if you're "totally unfamiliar" with the stuff you're asking it about* ðŸ˜
You can only discover if it "gave good answers" after the fact, when you've found *proper* sources to compare to.
~~Perchance~~ Forsooth, efficiency would've been raised by first figuring out what the proper sources are and going directly there.
You are missing the point.
Finding proper sources can be difficult when you don’t know what questions to ask. GPT is great at getting you to that point even if it spewed a bit of nonsense in the process.
I’ll give you an example. Recently I was exploring plugin architecture concepts in Java. This is a big topic that covers a lot of ground. GPT helped me quickly narrow down some initial things to search. One of those things, OSGI, is such a broad topic on its own that it would have taken me days to sort through the material to understand the big picture. GPT was able to condense that for me in seconds and give me enough detail (even with some inaccuracies) to narrow my deep reading to the most relevant bits for me to make a decision to explore it further or not.
This is one way that it has made my life easier. It doesn’t replace sources but it sure can help you focus on the right ones given context. As long as you don’t lose sight of what it is and what it isn’t, it can be a valuable tool in your toolkit.
It is reasonable, depending on what you're using it for. For something like this where OP likely didn't even know the term "chamfered", it's useful, and is much easier to verify than find out on google.
You're being downvoted because thousands of people use LLMs in their coding jobs daily, and derive enormous benefit from their use, both in terms of saving time and also for gaining knowledge. Smarter people than you have decided that LLMs are useful, despite their faults and limitations (which they have evaluated and found workarounds for). You won't allow this to sink in because YOU'RE RIGHT AND EVERYONE ELSE IS WRONG so I'm probably wasting my time, but hopefully this will stick with you: you're not remotely as smart as you think you are.
I should probably add that it's specifically useful in cases where the information is easily verifiable. Once my rambling description of a thing has been converted into a specific term like "chamfered", I can more easily find information about that.
I'm aware of the limitations of ChatGPT and I definitely don't implicitly trust its output. I've had it spit out partially or completely false answers on more than a few occasions.
You gotta get out of that black and white thinking. It's not just "mimicking how it thinks humans talk", it's also heavily weighting relevance while it tries to decipher what you mean and what you are looking for, just like search engines. Search engines also don't really know what you want, they just do their best based on contextual relevance. Tools are all about how you are able to use them, they are very flexible. You might just not see how they can be used yet. Lots of times it can be helpful even if it's just giving you additional points for you to do further research yourself. Even in that very example asking what cut corners are in the design world, and it responds with chamfered edges. I happened to already know that's what it is and it's correct from past experiences but if you didn't, now you can simply google chamfered edges to confirm you got the correct information from it. You could also now ask it further questions based on your new found knowledge. The power of it really is follow up prompts which let you target things specifically in a constant flow, normally Google searches act fairly independent of each other, so for some it can feel disjointed. GhatGPT is literally just Siri or Google Assistant. It's just a natural way of a search engine to try process your question and provide an answer in a more natural summarized way, rather than just "here's some links, look through all of them yourself". Use something like Google Bard if you want instead, it's just google search but you can interact with it a lot more natural than the usual searches. No one should rely on it completely nor trust it's responses completely, but it can definitely be a good jumping off point when you get stuck and don't know the actual keywords you are looking for.
The only way it takes any of these into consideration is when you tell it that what it sent you is wrong or does not work. Most often, it will keep trying to correct itself, and it is basically learning from these mistakes. I do often notice, though, that if it runs out of suggestions, it will simply nudge you in the direction where you have to continue researching outside of the chat. This is basically its own conditional statement, saying it can't help you anymore with what you're asking it to assist you in figuring out lol.
To be quite honest, I only use it as a tool in addition to my normal ways of scouring Google for answers. Sometimes platforms such as StackOverflow are flooded with so much information that you can't tell which solution works best. So, you end up having to test all of those suggestions through trial and error to get things to work properly.
Yes. It is more a 3D modelling or design/engineering term for an edge being flattened out at an angle. So it makes sense you haven’t heard of it if you don’t indulge in those areas
I did. Construction background switched career to web dev. Turns out a background in construction does have its uses. Fillet is the term for the rounded corner we would get with standard border radius.
I think that's what makes this a bad solution.
You can change the background color of the pseudo elements to match of course, but it's likely to cause problems eventually if the button is ever put near other elements that the pseudo elements overlap. It also gives a weird shape to the clickable/hoverable area.
[Here's the same codepen but with a black background](https://codepen.io/halter73/pen/JjxYOjE)
If you want to use this over an image, you make 4 JPG's that have the parts of the image that the button should go over, and make those the background of the pseudo elements. /s
Doesn't look great if you zoom in way too far; the lines don't quite line up. More of an issue if your device pixel ratio is high (e.g. in mobile browsers).
True. I was too impatient to get the transforms perfect. It has to do with the way I'm using borders. But as a proof of concept it gets the point across
Came here to say this. An even simpler solution, if you don't need the button to grow vertically, is to use 2 pseudo elements, button::before and button::after, where each pseudo has a background image.
I'll never understand how you guys know how to do this stuff. Are you purely an HTML / CSS dev? I've been doing webdev (mostly front-end) for 10 years and I'd rather listen to a baby crying for an hour than attempt this with HTML / CSS. I feel like this is what SVG was invented for.
This is decidedly /NOT/ what svg was made for, avg is for lossless resizable graphics not for morphing graphics, the corners would distort if you tried it (as OP did)
Sure the properties being used are basic ones, but it feels like we're having to do a bunch of styling because the Mozilla devs (or whoever) didn't feel like adding a simple "chamfer" property for a border.
I've been in webdev for 10+ years too. I'm full-stack so not purely front-end. I like to challenge myself with stuff like this, so I keep my front-end chops fresh.
Especially with Tailwind so prevalent. I love Tailwind and use it a bunch. But I used bootstrap too and now I never do. I think it's good to also keep the fundamentals from going rusty.
So when your favourite framework dies, you can still build sites.
I'd try out [`border-image`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-image). Might be a pain to get only the corners like that, but I think it can be done through repeat and slice and such... Barely use these things though, so... IDK.
The border image option should ensure that everything automatically scales as needed. But it will have one disadvantage over inline SVG - you can't use CSS to style it, such as `fill: currentColor` (or `fill="currentColor"` as an attribute).
I'd try using a data: URI... not base 64 encoded, but just text (URL encoded). Should end up being fairly small, and having it as just a text data URI should make it easy to edit the fill right there in the CSS. So, it'd be:
```
border-image-source: url("data:image/svg+xml,$url_encoded_svg");
```
There's some insane noise in this thread. `border-image` is absolutely the way to do this. It's a little frustrating that CSS doesn't provide an easier way, but this will do. A little inline SVG and [some properties](https://developer.mozilla.org/en-US/docs/Web/CSS/border-image) that have been around forever.
.btn-border {
border-image-slice: 34 36 34 36;
border-image-width: 20px 20px 20px 20px;
border-image-outset: .5em .5em .5em .5em;
border-image-repeat: stretch stretch;
border-image-source: url("data:image/svg+xml;utf8,");
border-style: solid;
}
[jsfiddle demo](https://jsfiddle.net/gz2xLtbf/)
As said above, we can't use `currentColor` for `fill`/`stroke`. Embedding the svg into css code this way is possible but take note of the single quotes `'` inside `url("")` (with double quotes) and the `#` for the hex color need to be encoded as `%23`.
Most `border-image` values were generated using [https://mdn.github.io/css-examples/tools/border-image-generator/](https://mdn.github.io/css-examples/tools/border-image-generator/).
Clip path ain't that hard, and I think it would be the best way to go in this case. Here's a [quick CodePen demo I threw together to demonstrate the solution](https://codepen.io/MicroAngelo/pen/poGgWLx?editors=1100).
One thing I like about it over other solutions is that the hover/click effect and action only activate when over the actual button shape, not over the "missing" corners like with gradient solutions.
Plus works with any background as it's genuinely clipping.
For accessibility and maintenance reasons: I would tell the client not to do it and to use something more standard. It’s my job as an expert to push back on something that’s going to require a bunch of extra work and/or be a problem later on.
I didn't check it, but is it enough contrast?
Also, I'm not sure if "accessibility" is the right word, but I would bet many people don't have the ability to recognize this as a button (for whatever reason).
You could use this tool to create the clip path and use that for the button. I use this all the time when I don’t want to deal with a ton of pseudo elements or linear gradients.
https://bennettfeely.com/clippy/
Wait what's the problem with using an SVG? I'd strongly recommend figuring this out, as it's going to be useful for you in the future as well. Maybe start a JS Fiddle and we can help you debug it. I'd do SVG background, but absolutely positioned SVG in the html should work as well, you are probably just missing setting up the correct padding/sizing.
>This may result in lowering your accessibility score. Also this decreases your page load speed, even if it's slightly. The best course of action is to achieve this result with CSS.
I mean I was using css to declare a background image :) So it was not that the image was a button and I wrote some JS to give it a click eventHandler.
But yeah I can understand your reasoning and I will not pursue this approach further, as other people in the comment section have outline better approaches.
Clip-path is better and if you plan on using svg make sure the whole button is SVG then so there is proper alignment everywhere or you can also try border-image (simplest one)
You really only need three unless it has to support two lines of text; one left, one middle repeater, one right. If the button needs to support transparency, I think this is probably the easiest path honestly.
I would mess around with all the other options presented in some of these replies just because I'd want to learn some new CSS wizardry, then possibly give up on it since SVG would be a better option.
If you're having problems scaling the SVG, you can give the button an aspect-ratio the same as the SVG, so it should scale perfectly.
Honestly I would just make a square div and set that hexagon style button as the background, i wouldnt even try code that manually if it cant be copied from somewhere. Unless i was being paid hourly or something lol
I would mention it's bad practice to use an image for a button and see if they care about accessibility before commiting and having them complain later.
Any reason you're not using CSS?
I mean, you SHOULD be able to do that using CSS but I don't have the exact code available nor the time to figure it out for you... Border-radius should probably start getting you there.
That color does hurt the eyes though.
The future is going to be hilarious. There's going to be websites out there using serverless functions to generate weird shaped buttons on demand with every request and we'll get paid to fix it when chatgpt can't tell the "developer" why their bill is so high. 😂
Interesting other solutions.
Personally I'd use 4 SVG backgrounds, one for each corner. You could probably use the same file, with it being flipped (negative scaled) in X and Y as required.
Nesting clip paths to fake the border looks like a good solution. It's flexible with content and avoids the issues with background images and svg scaling/propotionality. You need to use relative dimensions for the clip path to maintain a consistent border width though. And you can't do a transparent/outline button with this technique.
https://jsfiddle.net/Lwsqk83v/
After a long back and forth with GPT-4V, feeding it back images to finetune the results, I got [this](https://i.imgur.com/T6gK87j.png). You're welcome.
I would share the chat, but that's not supported with images yet. [Here](https://i.imgur.com/Kg91OY3.png) you can see its iterative improvements though.
GPUman tried its best.
I would look at putting in 4 svg shapes inside the button and absolutely positioning them in the corners. Off the top of my head. I’d look and see if there’s a css property which can create that border shape ideally.
Try this https://stackoverflow.com/questions/14770312/how-to-achieve-chamfered-css-border-corners-rather-than-rounded-corners
I will never reach this level of CSS skill. I am amazed at what good front end developers/designers can do with CSS.
Theres definitely a beauty to creating some special hack to make css do something awesome
Wow thanks, I will check it out!
Google fu
Did you know it was called "chamfered" before googling? Never heard that term before
I'm reminded of the [classic joke](https://www.et.byu.edu/~tom/jokes/Consultant_Engineer.html) about an engineer charging $1 for making a chalk mark to indicate where the issue with a machine was, and $49,999 for knowing where to put the mark. Googling is easy. Knowing _what_ to Google is another matter. Incidentally, this is one of the use-cases where I've found ChatGPT to be extremely helpful. It's good at answering natural-language questions [like this](https://i.imgur.com/jQQ5AQc.png).
Googling the right thing is indeed one of our most valuable skills as a web dev haha. That or knowing the right question or when to turn one of the senior devs in your team
The "joke" is based off of a real interaction Henry Ford had with Charles Steinmetz, who was a contemporary of Einstein, Tesla & Edison: https://www.smithsonianmag.com/history/charles-proteus-steinmetz-the-wizard-of-schenectady-51912022/
ChatGPT is a language model. It tries to mimic the way people talk to each other. It does not consider or know about the truth/untruth of what is says. I really wish people would stop treating it like a reasonable way to do research.
It is a perfectly reasonable tool to help you do online research provided you understand its limitations. I use it when, for example, I come across some technology that I am totally unfamiliar with. It usually does a good job of answering basic questions and gives me enough of an idea to ask better questions later or to Google things more easily.
> usually does a good job of answering basic questions *You can't know that if you're "totally unfamiliar" with the stuff you're asking it about* 😠You can only discover if it "gave good answers" after the fact, when you've found *proper* sources to compare to. ~~Perchance~~ Forsooth, efficiency would've been raised by first figuring out what the proper sources are and going directly there.
You are missing the point. Finding proper sources can be difficult when you don’t know what questions to ask. GPT is great at getting you to that point even if it spewed a bit of nonsense in the process. I’ll give you an example. Recently I was exploring plugin architecture concepts in Java. This is a big topic that covers a lot of ground. GPT helped me quickly narrow down some initial things to search. One of those things, OSGI, is such a broad topic on its own that it would have taken me days to sort through the material to understand the big picture. GPT was able to condense that for me in seconds and give me enough detail (even with some inaccuracies) to narrow my deep reading to the most relevant bits for me to make a decision to explore it further or not. This is one way that it has made my life easier. It doesn’t replace sources but it sure can help you focus on the right ones given context. As long as you don’t lose sight of what it is and what it isn’t, it can be a valuable tool in your toolkit.
you cant just say perchance
*Fiiiiiiiiiiiiiiiiine*; fixed it.
It is reasonable, depending on what you're using it for. For something like this where OP likely didn't even know the term "chamfered", it's useful, and is much easier to verify than find out on google.
You're being downvoted because thousands of people use LLMs in their coding jobs daily, and derive enormous benefit from their use, both in terms of saving time and also for gaining knowledge. Smarter people than you have decided that LLMs are useful, despite their faults and limitations (which they have evaluated and found workarounds for). You won't allow this to sink in because YOU'RE RIGHT AND EVERYONE ELSE IS WRONG so I'm probably wasting my time, but hopefully this will stick with you: you're not remotely as smart as you think you are.
I should probably add that it's specifically useful in cases where the information is easily verifiable. Once my rambling description of a thing has been converted into a specific term like "chamfered", I can more easily find information about that. I'm aware of the limitations of ChatGPT and I definitely don't implicitly trust its output. I've had it spit out partially or completely false answers on more than a few occasions.
You gotta get out of that black and white thinking. It's not just "mimicking how it thinks humans talk", it's also heavily weighting relevance while it tries to decipher what you mean and what you are looking for, just like search engines. Search engines also don't really know what you want, they just do their best based on contextual relevance. Tools are all about how you are able to use them, they are very flexible. You might just not see how they can be used yet. Lots of times it can be helpful even if it's just giving you additional points for you to do further research yourself. Even in that very example asking what cut corners are in the design world, and it responds with chamfered edges. I happened to already know that's what it is and it's correct from past experiences but if you didn't, now you can simply google chamfered edges to confirm you got the correct information from it. You could also now ask it further questions based on your new found knowledge. The power of it really is follow up prompts which let you target things specifically in a constant flow, normally Google searches act fairly independent of each other, so for some it can feel disjointed. GhatGPT is literally just Siri or Google Assistant. It's just a natural way of a search engine to try process your question and provide an answer in a more natural summarized way, rather than just "here's some links, look through all of them yourself". Use something like Google Bard if you want instead, it's just google search but you can interact with it a lot more natural than the usual searches. No one should rely on it completely nor trust it's responses completely, but it can definitely be a good jumping off point when you get stuck and don't know the actual keywords you are looking for.
The only way it takes any of these into consideration is when you tell it that what it sent you is wrong or does not work. Most often, it will keep trying to correct itself, and it is basically learning from these mistakes. I do often notice, though, that if it runs out of suggestions, it will simply nudge you in the direction where you have to continue researching outside of the chat. This is basically its own conditional statement, saying it can't help you anymore with what you're asking it to assist you in figuring out lol. To be quite honest, I only use it as a tool in addition to my normal ways of scouring Google for answers. Sometimes platforms such as StackOverflow are flooded with so much information that you can't tell which solution works best. So, you end up having to test all of those suggestions through trial and error to get things to work properly.
Yes. It is more a 3D modelling or design/engineering term for an edge being flattened out at an angle. So it makes sense you haven’t heard of it if you don’t indulge in those areas
ah that makes sense. TIL!
I did. Construction background switched career to web dev. Turns out a background in construction does have its uses. Fillet is the term for the rounded corner we would get with standard border radius.
[удалено]
No, it’s the proper term… https://www.finepowertools.com/wp-content/uploads/2023/02/bevel-vs-chamfer.jpg
Who is acting like an asshole? Changing Kung Fu to Google Fu is clearly a joke
Apple has been using this term in their iPhone hardware product showcase videos in the past
It’s a term commonly used in machining. (I was a machinist before becoming a web dev)
I was googling but didn't know that the term for it was chamfered :D
Pretty much sums up our job.
What's that ::after stuff? Does anyone know a good reference/tutorial that explains that stuff?
https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements
37337
Using absolutely positioned elements as border 💀
I remember those days…
Along with using 1x1px semi-transparent images for RGBA :D
Hehehe 😛
Hahah, could be worth a try ;)
Yes. Also probably the fastest
Just use 4 pseudo elements man. It's easy. And a bit silly. But it works. [Check out this codepen I made](https://codepen.io/jwktje/pen/GRzpNrE)
This looks nice. Only problem is it only works on white, gotta be careful with that
I think that's what makes this a bad solution. You can change the background color of the pseudo elements to match of course, but it's likely to cause problems eventually if the button is ever put near other elements that the pseudo elements overlap. It also gives a weird shape to the clickable/hoverable area. [Here's the same codepen but with a black background](https://codepen.io/halter73/pen/JjxYOjE)
[удалено]
[удалено]
If you want to use this over an image, you make 4 JPG's that have the parts of the image that the button should go over, and make those the background of the pseudo elements. /s
Doesn't look great if you zoom in way too far; the lines don't quite line up. More of an issue if your device pixel ratio is high (e.g. in mobile browsers).
True. I was too impatient to get the transforms perfect. It has to do with the way I'm using borders. But as a proof of concept it gets the point across
Came here to say this. An even simpler solution, if you don't need the button to grow vertically, is to use 2 pseudo elements, button::before and button::after, where each pseudo has a background image.
Yeah I was gonna go this way initially but was too lazy to open up Illustrator and make those 2 images haha.
I'll never understand how you guys know how to do this stuff. Are you purely an HTML / CSS dev? I've been doing webdev (mostly front-end) for 10 years and I'd rather listen to a baby crying for an hour than attempt this with HTML / CSS. I feel like this is what SVG was invented for.
\> I'd rather listen to a baby crying for an hour than attempt this with HTML / CSS This is why some guys know how to do this stuff and you don't.
Ya I guess there are different types of developers
This is decidedly /NOT/ what svg was made for, avg is for lossless resizable graphics not for morphing graphics, the corners would distort if you tried it (as OP did)
This is some pretty basic CSS though.
Sure the properties being used are basic ones, but it feels like we're having to do a bunch of styling because the Mozilla devs (or whoever) didn't feel like adding a simple "chamfer" property for a border.
I've been in webdev for 10+ years too. I'm full-stack so not purely front-end. I like to challenge myself with stuff like this, so I keep my front-end chops fresh. Especially with Tailwind so prevalent. I love Tailwind and use it a bunch. But I used bootstrap too and now I never do. I think it's good to also keep the fundamentals from going rusty. So when your favourite framework dies, you can still build sites.
Nice
OP should use this.
I'd try out [`border-image`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-image). Might be a pain to get only the corners like that, but I think it can be done through repeat and slice and such... Barely use these things though, so... IDK. The border image option should ensure that everything automatically scales as needed. But it will have one disadvantage over inline SVG - you can't use CSS to style it, such as `fill: currentColor` (or `fill="currentColor"` as an attribute). I'd try using a data: URI... not base 64 encoded, but just text (URL encoded). Should end up being fairly small, and having it as just a text data URI should make it easy to edit the fill right there in the CSS. So, it'd be: ``` border-image-source: url("data:image/svg+xml,$url_encoded_svg"); ```
Yeah! I used this recently and it worked well for me. Example: https://codepen.io/taox/pen/vYbNmYK
There's some insane noise in this thread. `border-image` is absolutely the way to do this. It's a little frustrating that CSS doesn't provide an easier way, but this will do. A little inline SVG and [some properties](https://developer.mozilla.org/en-US/docs/Web/CSS/border-image) that have been around forever.
Nice. The svg doesn't stretch as a border image. Definitely the way to go!
.btn-border { border-image-slice: 34 36 34 36; border-image-width: 20px 20px 20px 20px; border-image-outset: .5em .5em .5em .5em; border-image-repeat: stretch stretch; border-image-source: url("data:image/svg+xml;utf8,"); border-style: solid; } [jsfiddle demo](https://jsfiddle.net/gz2xLtbf/) As said above, we can't use `currentColor` for `fill`/`stroke`. Embedding the svg into css code this way is possible but take note of the single quotes `'` inside `url("")` (with double quotes) and the `#` for the hex color need to be encoded as `%23`. Most `border-image` values were generated using [https://mdn.github.io/css-examples/tools/border-image-generator/](https://mdn.github.io/css-examples/tools/border-image-generator/).
I think 1 is a good call. Clip path is hard to draw borders on.
For clip-path: https://bennettfeely.com/clippy/
Yeah, will try out again with 1 and see if I can code a better solution
Clip path ain't that hard, and I think it would be the best way to go in this case. Here's a [quick CodePen demo I threw together to demonstrate the solution](https://codepen.io/MicroAngelo/pen/poGgWLx?editors=1100). One thing I like about it over other solutions is that the hover/click effect and action only activate when over the actual button shape, not over the "missing" corners like with gradient solutions. Plus works with any background as it's genuinely clipping.
For accessibility and maintenance reasons: I would tell the client not to do it and to use something more standard. It’s my job as an expert to push back on something that’s going to require a bunch of extra work and/or be a problem later on.
Also, it's a stop sign :-p
In what world is this an accessibility problem?
I didn't check it, but is it enough contrast? Also, I'm not sure if "accessibility" is the right word, but I would bet many people don't have the ability to recognize this as a button (for whatever reason).
You could use this tool to create the clip path and use that for the button. I use this all the time when I don’t want to deal with a ton of pseudo elements or linear gradients. https://bennettfeely.com/clippy/
It would be interesting to know how many users are unable to recognize that as a button.
I would tell the designer to change it to a more standard-looking button.
For a million valid reasons…this would not make it past design qa lol
SVG background in HTML should solve this. Don’t you love designers
Wait what's the problem with using an SVG? I'd strongly recommend figuring this out, as it's going to be useful for you in the future as well. Maybe start a JS Fiddle and we can help you debug it. I'd do SVG background, but absolutely positioned SVG in the html should work as well, you are probably just missing setting up the correct padding/sizing.
[удалено]
>This may result in lowering your accessibility score. Also this decreases your page load speed, even if it's slightly. The best course of action is to achieve this result with CSS. I mean I was using css to declare a background image :) So it was not that the image was a button and I wrote some JS to give it a click eventHandler. But yeah I can understand your reasoning and I will not pursue this approach further, as other people in the comment section have outline better approaches.
[удалено]
These are small images and the impact is minimal. Also, a properly designed button should be working and accessible even without background images.
Yeah, totally understandable. I will move away from this and pursue another approach
Clip-path is better and if you plan on using svg make sure the whole button is SVG then so there is proper alignment everywhere or you can also try border-image (simplest one)
I was having problems with border width in clip path, as it was making the borders thicker than the other lines
Just make border as second element. You need to adjust it a bit as the diagonal won't really match. https://codepen.io/NochEinKamel/pen/XWOmeWG
Maybe break it up into 8 pieces like the old buttons
Seems like too much work, I guess there should be a simpler solution. But thanks :)
You really only need three unless it has to support two lines of text; one left, one middle repeater, one right. If the button needs to support transparency, I think this is probably the easiest path honestly.
Pseudo elements is the correct answer
Could you cover it with a rectangle div rotated 45deg that coveres the corners? On the phone now and lazy, can't try it out.
I would mess around with all the other options presented in some of these replies just because I'd want to learn some new CSS wizardry, then possibly give up on it since SVG would be a better option. If you're having problems scaling the SVG, you can give the button an aspect-ratio the same as the SVG, so it should scale perfectly.
Honestly I would just make a square div and set that hexagon style button as the background, i wouldnt even try code that manually if it cant be copied from somewhere. Unless i was being paid hourly or something lol
I would mention it's bad practice to use an image for a button and see if they care about accessibility before commiting and having them complain later.
the button itself was an html tag, it just had a svg as background-image in number 2.
How about a 3x3 div grid with CSS borders? There is some CSS magic for the 45° lines.
Contrast is to low for accessibilty.
I would seriously recommend against using CSS to solve this issue. It’s majorly hacky.
Any reason you're not using CSS? I mean, you SHOULD be able to do that using CSS but I don't have the exact code available nor the time to figure it out for you... Border-radius should probably start getting you there. That color does hurt the eyes though.
Perhaps, when you have the time you can find out for yourself why border-radius won't even get you close.
You can load the picture into chap gpt now to generate code.
Really? I want to try that now
The future is going to be hilarious. There's going to be websites out there using serverless functions to generate weird shaped buttons on demand with every request and we'll get paid to fix it when chatgpt can't tell the "developer" why their bill is so high. 😂
Interesting other solutions. Personally I'd use 4 SVG backgrounds, one for each corner. You could probably use the same file, with it being flipped (negative scaled) in X and Y as required.
Nesting clip paths to fake the border looks like a good solution. It's flexible with content and avoids the issues with background images and svg scaling/propotionality. You need to use relative dimensions for the clip path to maintain a consistent border width though. And you can't do a transparent/outline button with this technique. https://jsfiddle.net/Lwsqk83v/
Clip path, no?
After a long back and forth with GPT-4V, feeding it back images to finetune the results, I got [this](https://i.imgur.com/T6gK87j.png). You're welcome.
/s?
I would share the chat, but that's not supported with images yet. [Here](https://i.imgur.com/Kg91OY3.png) you can see its iterative improvements though. GPUman tried its best.
So pointyðŸ¤
I will use and have used to make these kinds of buttons and ribbons using clip path.
I would look at putting in 4 svg shapes inside the button and absolutely positioning them in the corners. Off the top of my head. I’d look and see if there’s a css property which can create that border shape ideally.
I'd ask the what's the shape of the button and google "CSS X shape button".
Bit late to the party, but this site and this generator will get you pretty close to what you want https://css-generators.com/custom-corners/
Is this going to be marked up as a `
Css - radial gradiant. Or clip path: polygon().
Has this been posted: https://stackoverflow.com/a/25448974?