Skip to main content
K
kierank37479025
Known Participant
December 1, 2018
Answered

How to create a rectangle with slanted corner?

  • December 1, 2018
  • 2 replies
  • 6545 views

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.

 

This topic has been closed for replies.
Correct answer Randy Edmunds

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

2 replies

C
Cody5FE4
Participant
September 10, 2020

 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
    Community Manager
    HARSHIKA_VERMACommunity Manager
    Community Manager
    September 11, 2020

    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

    Randy Edmunds
    Adobe Employee
    Randy EdmundsCorrect answer
    Adobe Employee
    December 1, 2018

    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

    K
    kierank37479025Author
    Known Participant
    December 1, 2018

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

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices