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
nublet
nubletā€¢2y ago
Are you talking about the end of the solid yellow corners?
aolko
aolkoā€¢2y ago
no, left top
nublet
nubletā€¢2y ago
Ohh gotcha Or a right triangle in that case you would probably want a right triangle connecting to a rectangle
aolko
aolkoā€¢2y ago
another example
nublet
nubletā€¢2y ago
In that one I'd prolly do a mask
RobyDobyDingo
RobyDobyDingoā€¢2y ago
You can use a clip path
nublet
nubletā€¢2y ago
Rectangle parent relative div 2 Triangle children absolute position in bottom right
Chris Bolson
Chris Bolsonā€¢2y ago
this 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.
aolko
aolkoā€¢2y ago
clip-paths are not very scalable and doing an outline with them is a pain
Chris Bolson
Chris Bolsonā€¢2y ago
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.
phyrasaur
phyrasaurā€¢2y ago
so a canvas with background-image: paint() then another one is svg in border-image
Kevin Powell
Kevin Powellā€¢2y ago
Kevin 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: ...
Kevin Powell
Kevin Powellā€¢2y ago
šŸ˜
Want results from more Discord servers?
Add your server