Elements rendered with shortcodes can be clipped using the clip
argument. Clipping changes the top/bottom angle of the element.
Clip shortcode arguments
clip [ n ] | Clip the top and bottom. |
clip [ n | 0 ] | Clip the top. |
clip [ 0 | n ] | Clip the bottom. |
Clipped images
[image inverted src="//placehold.co/150x150" clip="1"]
[image inverted src="//placehold.co/150x150" clip="-1"]
Clipped from the top
[image inverted src="//placehold.co/150x150" clip="2 0"]
[image inverted src="//placehold.co/150x150" clip="-2 0"]
Clipped from the bottom
[image inverted src="//placehold.co/150x150" clip="0 3"]
[image inverted src="//placehold.co/150x150" clip="0 -3"]
Clipped front page composite
Lorem
Lorem ipsum dolor sit amet.
Ipsum
Lorem ipsum dolor sit amet.
Dolor
Lorem ipsum dolor sit amet.
[segment borderless feature alternate vertical stripe clip="4 -2"]
[container three column center aligned relaxed stackable grid]
[row]
[column]
[header large icon icon="code"]Lorem[/header]
[p]Lorem ipsum dolor sit amet.[/p]
[button large]Ipsum[/button]
[/column]
[column]
[header large icon icon="upload"]Ipsum[/header]
[p]Lorem ipsum dolor sit amet.[/p]
[button large primary]Dolor[/button]
[/column]
[column]
[header large icon icon="paint brush"]Dolor[/header]
[p]Lorem ipsum dolor sit amet.[/p]
[button large]Lorem[/button]
[/column]
[/row]
[/container]
[/segment]
Top clipped front page composite
Lorem ipsum dolor
Lorem ipsum dolor sit ipsum sit dolor amet.
[segment alternate vertical stripe clip="-9 0"]
[container center aligned stackable grid]
[column fourteen wide]
[header huge paddingless icon icon="bullhorn"]Lorem ipsum dolor[subheader normal]Lorem ipsum dolor sit ipsum sit dolor amet.[/subheader][/header]
[p][button huge marginless positive right labeled icon icon="right arrow"]Let's do this![/button][/p]
[/column]
[/container]
[/segment]