How to create a rectangle with slanted corner?

[kierank37479025]

Hello there, I'm working on a Game UI which I've assembled in Photoshop and Illustrator over the last year.

I'm looking now to build the UI in Xd - Quick question here: Is it possible to make a rectangle with slanted corners like this (border radius 4px) I know I can draw it in Illustrator, but I would like to have a rectangle which I can scale and stretch where the corners remain the same.

[Randy Edmunds · Accepted solution]

You can use the new Border Bevel Join feature. An 8px border should give you a 4px corner. See gif: https://imgur.com/a/FLreHfy

Also, you can create a Path and marquee select multiple points to effectively change width and height of an object without affecting the shape of the corners. See gif: https://imgur.com/a/YVbf8VE

Hope this helps,

Randy

[kierank37479025]

Ahh Randy, that's fantastic! thank you very much... I may try and use XD instead of Sketch now

[fab-design]

Sorry but your links are dead - can you explain how to do that? I really like the way corners are handles in InDesign and would love it it was ported to Illustrator rather than having different ways of doing the same thing in these apps

[Randy Edmunds 2]

Here's a new gif with Border Bevel Join feature:

[Randy Edmunds 2]

Here's a new gif that shows multiple selection of points on a path so you can resize a rectangle with custom corners without losing shape of corners:

[jaredl6231991]

Hello, I am using Photoshop 2024, and I don't even see this feature. The button that would correspond to it, likely the one that brings up this drop-down menu, , does nothing to alter the rectangle. Where else can I find the feature, or has it been removed?

[Kenneth Kawamoto]

This is not a Photoshop forum, but Photoshop does apply the bevel joint to paths correctly

[Cody5FE4]

 I make linear corners by:

1. round the corners as normal

2. double-click the square to enter edit mode

3. double-click the rounded corners points to change their interpolation from bezier to linear.

[HARSHIKA_VERMA]

Awesome. Thanks for sharing your workflow. This will definitely our customer to achieve the same design. Please feel free to reach out to us in the future for any assistance related to XD.

We would be happy to help.

Thanks,

Harshika