What's the best way to make angled corners?
here's an example: https://www.thetalosprinciple.com/
This fine specimen was made with a border image
The Talos Principle 2
The Talos Principle 2
Born into a new world where biological humanity is extinct but human culture lives on in a city of robots, you find yourself swept up in a mind-bending adventure involving a mysterious megastructure hiding enormous powers.
13 Replies
Are you talking about the end of the solid yellow corners?
no, left top
Ohh gotcha
Or a right triangle
in that case you would probably want a right triangle connecting to a rectangle
another example
In that one I'd prolly do a mask
You can use a clip path
Rectangle parent relative div
2 Triangle children absolute position in bottom right
clip-paths is probably the way to go. But as @.nublet has pointed out, you may have to use a different solution for each use case as clip-paths might get overly complicated in some places.clip-paths are not very scalable
and doing an outline with them is a pain
I suppose that depends on the use case and just how complicated the clip-path is.
Using calc() it can be made scaleable on buttons like the one @aolko has shown.
https://codepen.io/cbolson/pen/VwENeLZ just as a proof of concept for buttons like the one above. It uses a simple clip-path on a pseudo element to create a false border.
so a
canvas with background-image: paint() then
another one is svg in border-imageKevin Powell
YouTube
Create borders with cut corners | fully responsive CSS and easy to ...
I was asked if we could make a button with cut corners, and it seemed like a fun challenge, and this is my solution! It involves a lot of custom properties and the setup is a little complex, but the custom properties make it easy to make changes down the line!
š Links
ā
The code: https://codepen.io/kevinpowell/pen/bGLmORx
ā
How to pick units: ...
š