: Sketch: How to partially fill existing shape? I would like to fill in one of the three portions of this shape. Note that the outer 4 corners are rounded.

@Merenda852

I agree with Westside that chopping up your shape would be the best idea.

If you'd really want to colour your single shape only partially, you could use a gradient fill with stops very close to each other on the exact place of the separator. So, say that the separators are at 40% and 75% of the shape's width, you'd make grey stops at 0%, 40%, 75% and 100% and your desired colour's stops at 40.1% and 74.9%. That would colour the middle part of the shape.

If you place stops this close together, the gradient no longer functions as a gradient, because the colour transition is almost immediate.

Vote Up Vote Down

@Nimeshi706

The solution to this is not to try and fill only part of the shape, but to make the shapes three separate objects that can then be filled with whatever colour you want. So in your case, you would want a standard rectangle in the middle, with rectangles on either side that each have two right angle corners and two rounded corners.

I found this with a little bit of hunting... www.sketchtips.info/articles/rounded-corners
Turns out that you can have rectangles with different radii on each corner, but the way that you do that is a bit hidden in Sketch. You need to replace the single number in the radius box with four numbers separated by semicolons (;) the order of the numbers gives the radius of the corners as follows: top left, top right, bottom right, bottom left. i.e. clockwise from top left.

So for your case, assuming that you have a corner radius of 5, the corners for the leftmost shape would be 5;0;0;5 and for the shape on the right the corner radius box would need to contain 0;5;5;0.

Pretty tidy and easy when you know how, but not very discoverable.

Vote Up Vote Down