How can I create these bezels that is shown throughout this design?

[MarinaSwige]

Hi all,

I have been given a static design in Adobe Illustrator where the designer has created these "bezels". The bezels are used in multiple places throughout the design and vary in size. I'm thinking I could create a different SVG for each of the different-sized bezels, however, I'm not sure how I can make these SVGs responsive.

Would love some help pointing me in the right direction.

https://imgur.com/YHWuVov

 

[RidgeOa]

It's a classic css trick you can use to make angles. It's just a div with a thick border, but here the border has a color of transparent. So you only see the last border that has that bezel shape.

you could also use the same trick of transparent borders by using pseudo elements to avoid the extra empty markup.

Here is an example using pseudo elements, I have also used custom properties and calculations to show how it could easily be adapted to each use case :

Spoiler: Codepen

You don't have permission to view the spoiler content. Log in or register now.