SVG
SVGのコーディングパターン

skew

斜めの区切り。

skew1

<svg class="svg-skew" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64" preserveAspectRatio="none" fill="#757575">
	<path d="M0 0 L64 64 L64 0 Z" />
</svg>

skew2

<svg class="svg-skew" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64" preserveAspectRatio="none" fill="#757575">
	<path d="M0 64 L64 64 L0 0 Z" />
</svg>

skew3

<svg class="svg-skew" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64" preserveAspectRatio="none" fill="#757575">
	<path d="M0 64 L64 0 L0 0 Z" />
</svg>

skew4

<svg class="svg-skew" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64" preserveAspectRatio="none" fill="#757575">
	<path d="M0 64 L64 64 L64 0 Z" />
</svg>

triangle

三角の区切り。

triangle1

<svg class="svg-triangle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64" preserveAspectRatio="none" fill="#757575">
	<path d="M0 0 L32 64 L64 0 Z" />
</svg>

triangle2

<svg class="svg-triangle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64" preserveAspectRatio="none" fill="#757575">
	<path d="M0 64 L32 0 L64 64 Z" />
</svg>

curve

曲線の区切り。

curve

<svg class="svg-curve" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64" preserveAspectRatio="none" fill="#757575">
	<path d="M0 0 L64 0 Q32 128 0 0 Z" />
</svg>

curve

<svg class="svg-curve" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64" preserveAspectRatio="none" fill="#757575">
	<path d="M0 64 L64 64 Q32 -64 0 64 Z" />
</svg>

wave

波の区切り。

wave1

<svg class="svg-wave" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100" preserveAspectRatio="none" fill="#757575">
	<path d="M0,0 v50 q25,100 50,0 t50,0 v-50 Z"></path>
</svg>

wave2

<svg class="svg-wave" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100" preserveAspectRatio="none" fill="#757575">
	<path d="M0,0 v50 q25,-100 50,0 t50,0 v-50 Z"></path>
</svg>

wave3

<svg class="svg-wave" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100" preserveAspectRatio="none" fill="#757575">
	<path d="M0,0 v50 q10,100 20,0 t20,0 t20,0 t20,0 t20,0 v-50 Z"></path>
</svg>

wave4

<svg class="svg-wave" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100" preserveAspectRatio="none" fill="#757575">
	<path d="M0,0 v50 q10,-100 20,0 t20,0 t20,0 t20,0 t20,0 v-50 Z"></path>
</svg>
loading...