コンテンツにスキップ
Lism UI

ShapeDivider

svgで境界線を描画するコンポーネントです。

↓
Preview
リサイズ可能 
<ShapeDivider viewBox='0 0 10 10' level='5'><path d="M10 10V0L0 10z"/></ShapeDivider>

Import

ソースコードを手動でコピー&ペーストしてご利用ください。

Props

プロパティ説明
viewBox出力するsvgのviewBox。
levelシェイプの高さレベルを正の数で指定できます。
offsetY全体を上下にずらすための変数を出力します。
offsetXシェイプを水平方向にずらすための変数を出力します。
stretchシェイプを水平方向に引き伸ばして表示するための変数を出力します。
scalecss.scaleに値を渡します。-X,-Y,-XYを指定するとユーティリティクラス化されます。

Examples

scaleで反転させることで、同じsvgを上下に利用できます。

↓
Example 1

Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi provident libero, eum nulla sunt, porro sed dicta. Impedit ullam eveniet obcaecati minima.

Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi provident libero, eum nulla sunt, porro sed dicta. Impedit ullam eveniet obcaecati minima.

Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi provident libero, eum nulla sunt, porro sed dicta. Impedit ullam eveniet obcaecati minima.

リサイズ可能 
<Box hasGutter py='50' bgc='text' c='base'>
  <Dummy length='l' />
</Box>
<Box pos='r'>
  <ShapeDivider viewBox='0 0 10 10' level='6' scale='-Y' offsetX='-0.5px'>
    <path d="M10,10V0L0,9.5V10L10,10z"/>
  </ShapeDivider>
  <Box hasGutter py='50'>
    <Dummy length='l' />
  </Box>
  <ShapeDivider viewBox='0 0 10 10' level='6' offsetX='0.5px'>
    <path d="M10,10V0L0,9.5V10L10,10z"/>
  </ShapeDivider>
</Box>
<Box hasGutter py='50' bgc='text' c='base'>
  <Dummy length='l' />
</Box>

SVGは、描画時にほんの少し隙間ができてしまうことがあるので、 offsetY で 少しだけずらして配置しています。

以下はアニメーションをONにした時の例です。

↓
Example 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. Amet ab commodi rerum voluptas iusto dolores numquam cum ratione, dignissimos quia recusandae assumenda magnam, molestiae necessitatibus quas minus, quod consectetur pariatur. Possimus eligendi ipsam rerum, nihil incidunt, commodi impedit eum blanditiis, quisquam maiores corrupti rem. Provident tempora vitae, quo at inventore est sapiente.

Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi provident libero, eum nulla sunt, porro sed dicta. Impedit ullam eveniet obcaecati minima.

リサイズ可能 
<Box pos='r' hasGutter>
  <Spacer h='50' />
  <Frame isLayer z='-1'>
    <Media src='/img/img-1.jpg' alt='' width='960' height='640' />
    <Layer bgc='black' op='0.5'/>
  </Frame>
  <Box py='50' c='white'>
    <Dummy length='xl' />
  </Box>
  <ShapeDivider viewBox='0 0 100 10' isAnimation c='base' level='6' offsetX='-0.5px'>
    <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 d="M100,7.5C91.5,5,77.1,11.8,54,8C34.6,4.8,14.4,4.1,0,8.5V10h100V7.5z"/>
  </ShapeDivider>
</Box>
<Box hasGutter py='50'>
  <Dummy length='l' />
</Box>

上下に同じシェイプを使いまわす時、そのまま反転させると少し違和感がでてくるかもしれません。
そういう場合は、stretch,offsetXでsvgをずらすことで、同じシェイプでも自然な表示にすることができます。

↓
stretch,offsetXの活用

Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi provident libero, eum nulla sunt, porro sed dicta. Impedit ullam eveniet obcaecati minima.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. Amet ab commodi rerum voluptas iusto dolores numquam cum ratione, dignissimos quia recusandae assumenda magnam, molestiae necessitatibus quas minus, quod consectetur pariatur. Possimus eligendi ipsam rerum, nihil incidunt, commodi impedit eum blanditiis, quisquam maiores corrupti rem. Provident tempora vitae, quo at inventore est sapiente.

Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi provident libero, eum nulla sunt, porro sed dicta. Impedit ullam eveniet obcaecati minima.

リサイズ可能 
<Box hasGutter py='40'>
  <Spacer h='20'/>
  <Dummy length='l' />
</Box>
<Box pos='r' hasGutter>
  <ShapeDivider viewBox='0 0 100 10' c='base' scale='-XY' level='5' stretch={1.1} offsetX='-5%' offsetY='-0.5px'>
    <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"/>
  </ShapeDivider>
  <Frame isLayer z='-1'>
    <Media src='/img/img-2.jpg' alt='' width='960' height='640' />
    <Layer bgc='text' op='0.75'/>
  </Frame>
  <Box py='50' c='base'>
    <Dummy length='xl' />
  </Box>
  <ShapeDivider viewBox='0 0 100 10' c='base' level='5' stretch={1.1} offsetY='0.5px'>
    <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"/>
  </ShapeDivider>
</Box>
<Box hasGutter py='40'>
  <Dummy length='l' />
  <Spacer h='20'/>
</Box>