ShapeDivider

↓

Preview

Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut. Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.

リサイズ可能

import { ShapeDivider } from '@lism-css/ui/react';

プロパティ	説明
`viewBox`	出力するsvgのviewBox。
`level`	シェイプの高さレベルを正の数で指定できます。
`offset`	シェイプを水平方向にずらすための変数を出力します。
`stretch`	シェイプを水平方向に引き伸ばして表示するための変数を出力します。
`isEmpty`	シェイプを表示せず、Spacerのように使用することができます。

↓

Example 1

Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut. Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut. Aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint.

Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut. Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut. Aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint. Occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis undeomnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut. Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut. Aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint.

リサイズ可能

<Wrapper hasGutter py='40'>
  <ShapeDivider isEmpty level='2.5' />
  <Dummy length='l' />
</Wrapper>
<Wrapper hasGutter bgc='text' c='base'>
  <ShapeDivider viewBox='0 0 10 10' level='5' flip='XY'>
    <path d='M10,10V0L0,9.5V10L10,10z'></path>
  </ShapeDivider>
  <Box py='40'>
    <Dummy length='xl' />
  </Box>
  <ShapeDivider viewBox='0 0 10 10' level='5'>
    <path d='M10,10V0L0,9.5V10L10,10z'></path>
  </ShapeDivider>
</Wrapper>
<Wrapper hasGutter py='40'>
  <Dummy length='l' />
  <ShapeDivider isEmpty level='2.5' />
</Wrapper>

↓

Example 2

Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut. Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut. Aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint.

リサイズ可能

<Container pos='rel'>
  <ShapeDivider isEmpty level='7' />
  <Frame isLayer z='-1' max-w='100%'>
    <Media src='https://cdn.lism-css.com/img/a-1.jpg' alt='' width='960' height='640' />
    <Layer bgc='black:50%' />
  </Frame>
  <Wrapper contentSize='s' hasGutter py='40' c='white'>
    <Dummy length='xl' />
  </Wrapper>
  <ShapeDivider viewBox='0 0 100 10' isAnimation c='base' level='7'>
    <path opacity='.3' d='M100,5.5C91.5,3,79.5,7.5,71.5,8C58,9,49,0.5,36,2c-9,1-13.5,3.5-20.5,3.5C8.5,6,0,2,0,2v8h100V5.5z'></path>
    <path opacity='.3' d='M100,1.5C87.8,6.6,79.3,2.1,67.8,2.6S53,6.5,42.5,5.5S23,0,15,0S1,3,0,4v6h100V1.5z'></path>
    <path d='M100,7.5C91.5,5,77.1,11.8,54,8C34.6,4.8,14.4,4.1,0,8.5V10h100V7.5z'></path>
  </ShapeDivider>
</Container>
<Container isWrapper='s' hasGutter py='40'>
  <Dummy length='l' />
</Container>

↓

stretch,offsetの活用

Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut. Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut. Aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint.

Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut. Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut. Aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint. Occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis undeomnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut. Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut. Aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint.

リサイズ可能

<Wrapper contentSize='s' hasGutter py='40'>
  <ShapeDivider isEmpty level='4' />
  <Dummy length='l' />
</Wrapper>
<Container pos='rel' hasGutter c='base' bgc='text'>
  <ShapeDivider viewBox='0 0 100 10' c='base' flip='Y' level='8' stretch={1.1} offset='-5%'>
    <path d='M100 6C89.3 3.3 82.7 9 70 9S48.4 3 38 3 24.5 6 17 6C7.4 6 0 0 0 0v10h100V6z'></path>
  </ShapeDivider>
  <Wrapper contentSize='s' py='40'>
    <Dummy length='xl' />
  </Wrapper>
  <ShapeDivider viewBox='0 0 100 10' c='base' level='8' stretch={1.1}>
    <path d='M100 6C89.3 3.3 82.7 9 70 9S48.4 3 38 3 24.5 6 17 6C7.4 6 0 0 0 0v10h100V6z'></path>
  </ShapeDivider>
</Container>
<Wrapper contentSize='s' hasGutter py='40'>
  <Dummy length='l' />
  <ShapeDivider isEmpty level='4' />
</Wrapper>

Create Component

Source Code

Import

Props

Usage

Example 1

Example 2 アニメーションをオンにする例

Example 3 SVGをずらして配置する例