Inverted Corners

Inverted Corner is a nestable block element based on the popular inverted corners trend. It is made up of a “Block Content” element that occupies the block’s dimensions and a “Corner Content” element that occupies a space at the corner to generate the inverted corner effect.
Elements to be added to the block must be added to the “Block Content” element. Elements to be added to the corner must be added to the “Corner Content” element.

At this section you can style Inverted Corner block styles, including width and height. Any other style you need can be set at the style tab or at Block Content and Corner Content elements style tabs.
Border radius: determines the border radius of Block Content element. Including the radius of the corners except the inverted one.
Block Content Background: the background of Block Content element.
Mask Background: the background of the space occupied at the inverted corner by Corner Content element.

Position: determines where to place the inverted corner: top left, top right, bottom left or bottom right.
Width: the width occupied by Corner Content element.
Height: the height occupied by Corner Content element.
Border radius: the radius of the inverted corner.
Distance: the margin distance to set to the corner. A value of “0” won’t apply any offset, so width and height will determine everything. The bigger the distance is the bigger the margin.

– Tamu