[deleted]
Now try drawing a triangle with a rounded corner in Assembly
If we are using BIOS routines, then we need to switch to mode 13h and then create a function like
putpixel:
mov cx,320
mul cx; multiply AX by 320 (cx value)
add ax,bx ; and add X
mov di,ax
mov [es:di],dl
ret
then we can set ax with Y coord, bx with X
With a bit of math we can determine which pixel must be drawn to form a triangle
Now try making a triangle with rounded edges out of a wooden block and see how much work it takes.
Same as the top comment here - draw an svg and put into the appropriate tool.
plugs in react-router
there are a lot of cases to make why CSS sucks and is overly complicated
this isn't one of them
CSS is designed for styling elements in a document, not creating new elements. If you want a rounded triangle, use an <img>, <svg>, or <canvas>
So, you ask a language that exists to make rectangles and text inside rectangles pretty to make a triangle out of said rectangle, and don't like that it takes a bit of effort? Besides, it's pretty readable what is happening. And there are easier ways to do it, for example using ForeignElement interface of HTML to insert proper SVG image.
[deleted]
If I give you ANY vector image serialized in whatever textual representation (like SVG), would you be able to tell me what's in there? Yeah, that's how graphics usually work. But what this code does is obvious: it defines mask and clipping path. What shape? Yeah, let's render and see.
[deleted]
I can easily tell the CSS that renders a rounded rectangle without having to render it to see what it actually does
Yes, because it is what CSS is mostly for: rectangular stuff laid out in other rectangular stuff.
Triangles could just as easily be part of CSS's vocabulary
Why? What's the reason for that? There is already a tool to draw triangles, it's called SVG.
[deleted]
Because modern designs are full of triangles and other odd shapes, and when you stack them up the CSS ends up looking like Oompa Loompa's barf?
No, I just don't use CSS when I need triangular (or other polygonal) shapes. Again, SVGs exist.
Maybe you work with heavenly CSS codebases that have 0 hacky things in them. Some of us ain't that lucky.
We have a shitton of hacks, some of them because of CSS limitations, but mostly because devs (me included) were too hurried to deliver things. Still, none of them are there to draw what arguably is vector graphics.
[deleted]
No, I mention SVGs because they are THE right tool to draw vector graphics on web pages.
Most front enders will gravitate towards pure CSS solutions because they're usually the right call.
No, whenever I need to draw some graphics that designers came up with I just export node from figma as SVG and call it a day. Everyone else on my team does that as well.
They have their uses, but they also have their own problems and many, many downsides. That's why hacks such as the one in the code above exist to begin with.
Can you elaborate, what were you trying to achieve with that piece of CSS that would be impossible with SVGs? To put HTML stuff inside triangle? I am yet to encounter that use case in the wild.
[deleted]
Of course not. Not only I'm not as proficient in cutting edge CSS, I also support browsers where this doesn't work (no trigonometric functions and no mask property), so this thing is absolutely useless to me in my work. I am also not good at math, so I would definitely fail to code such thing myself (well, maybe I'd manage, but it would take A LOT of time).
And yes, it's complex (I never said it wasn't), but it is indeed readable and possible to quickly understand what different parts do and how they affect our rectangle. It's even possible to do small refactoring and move gradients to custom properties with nice names for better readability.
Everything's a box
Why wouldnāt you just display it as an image? Use CSS to center it or add padding or whatever.
[deleted]
Maybe you do. How does that change anything?
Yeah, we can use it as a background image.
There's this wonderful css property called mask-image(link) which you can use to create arbitrary content clipped to an image.
Why is it "humor" to now know which tool to use for which task?
Will it also be "programmer humor" to post an image of someone trying to write a thesis in Microsoft Paint, and complaining about how hard it is?
I don't know. I'd love some kind of verified, "adult swim" programmerHumor subreddit that weeds out student and junior commentary.
thats why SVG exist
At this point Iām just using an SVG
SVG's clearly are illegal i tell you hwat
Svg.
But what if i want to use content inside it?
Still svg.
But what if i want to animate certain parts.
Still svg.
But what if i want to apply styles to certain parts?
Still svg.
You might as well make a post complaining that your car doesn't fit on train tracks.
Another junior within 24 hours dragging CSS because they don't understand it or, more importantly, when to use the correct tools for the job.
Custom, scalable graphics are easily and should be rendered with the right tool for the job - SVG, not a literal -> box <- model.
Itās like CSS looked at Tikz and said āhow can we make this less intuitiveā
Yeah, that's what happens when you need to draw complex shape from scratch (because no inbuilt primitives for triangles exist) in a language that usually isn't used for that.
Why not just draw it as path in SVG? Like this. All the shenanigans are in the path's d attribute, which is expected to have data that isn't easily human-readable and all the code around it is normal HTML and CSS without anything wonky.
Edit: added example.
just use SVG as a mask if you really want to get fancy with the content of the triangle
[deleted]
It doesn't.
You're having trouble tying your shoelaces with a gun and then claiming that guns are hard to use when yours shoots you in the foot.
[deleted]
This bait isn't fresh, I'm not taking it. š¤
[deleted]
Well, maybe you can code the next GUI Framework with your amazing back end skills
[deleted]
I'll take the wager that you won't be able to do half the things you can do with CSS in your new framework any day.
The "insane crap" is not actually insane if you understand why it's there and how it works. Just like in C++, there are a million different ways to do the same thing, and some are equally insane to the stuff you can do in CSS.