画像を用意する
border-image-sourceで枠の元画像を指定します。ここでは180×180pxのSVGを使用しています。
CSS BACKGROUNDS & BORDERS · 096
CSS Border Image Slicer
画像を9分割して、サイズが変わっても使える枠を作る。
01SOURCE → BORDER
LIVE NINE-SLICE LAB
分割線を動かして、枠を比べる
borders.local / nine-sliceLIVE PREVIEW
9つの領域を、ひとつの枠へ。
角はそのまま。辺は伸ばす。
01 / SOURCE IMAGE
元画像を9分割
角辺中央
紫の線がborder-image-slice。四隅・四辺・中央を切り分けます。
02 / RESULT
枠に適用
FRAME SAMPLE同じ素材で、
幅の違う枠に。
幅の違う枠に。
枠を広げても、角の絵柄は引き伸ばされません。
プレビュー幅と辺の繰り返し方を変えて、角と模様を見比べてください。
四隅：1回ずつ配置四辺：伸縮・繰り返し中央：通常は非表示
SIZE COMPARISON
同じCSSを、幅の違う2つの枠に適用
COMPACT
Small frame
WIDE
Wide frame
02
HOW IT WORKS
9分割で枠を作る仕組み
四辺から切り分ける
border-image-sliceで画像を9領域に分けます。角は一度ずつ配置され、辺は枠の長さに合わせて描かれます。
枠の場所を確保する
borderで枠の場所を確保し、border-image-widthで画像を描く幅を指定します。デモでは同じ値に揃えています。
辺と中央を決める
border-image-repeatで四辺の伸ばし方を選択。fillを付けると、通常は捨てられる中央も描画します。