coder's log

コーダー日誌

[CSS]四隅を切り落とした枠線（八角形フレーム）

公開日：2019/10/08

とあるサイトのとある特集ページで枠線が八角形という部分がありました。・・・中身は可変するよ！レスポンシブ対応だぞ！
というわけで、四隅に角を切り落とした画像をいれてもいいけれど、CSSで枠線を描画できたらいいのになと思って挑戦してみました。

春はあけぼの。やうやう白くなりゆく山ぎはすこしあかりて、むらさきだちたる雲のほそくたなびきたる。

夏は夜。月のころはさらなり、やみもなほ、ほたる飛びちがひたる。また、ただ一つ二つなど、ほのかにうち光りて行くもをかし。雨など降るもをかし。

元ネタ

デザイン要件は、四隅を落とした八角形の枠のなかに画像やテキストが入っていることと、八角形枠は枠線と背景色が必要、中に入る画像やテキストは不定期に変更される（画像サイズや文字数は一定ではない）・・・という感じなので、参考元のコードに若干の手直しが必要になります。

cssをあてるhtml

<div class="frame_oct">
    <div>
        <!--ここにコンテンツ-->
    </div>
</div>

タグやclass名、構造などは適宜変更してください。

cssコード

.frame_oct {
    background: linear-gradient(45deg, transparent 14px, #ec6db3 15px, #fdf0f7 16px), linear-gradient(135deg, transparent 14px, #ec6db3 15px, #fdf0f7 16px), linear-gradient(225deg, transparent 14px, #ec6db3 15px, #fdf0f7 16px), linear-gradient(315deg, transparent 14px, #ec6db3 15px, #fdf0f7 16px);
    background-position: bottom left,top left,top right,bottom right;
    background-size: 50% 50%; /* 隙間ができる場合は51% 51%にする */
    background-repeat: no-repeat;
}

.frame_oct::before,
.frame_oct::after {
    display: block;
    content: "";
    width: auto;
    margin: 0 20px;
}

.frame_oct::before {border-top: solid 1px #ec6db3;}
.frame_oct::after {border-bottom: solid 1px #ec6db3;}

.frame_oct > div {
    border-left: solid 1px #ec6db3;
    border-right: solid 1px #ec6db3;
    margin: 20px 0;
    padding: 0 20px;
}

結論から言うと、こんな感じのcssをあてています。仕組み的な話は、元ネタ参照のこと。

枠線をつける

ベースは「CSS3でボックスの角にベベル（丸くないborder-radius）をかける方法」のソースをコピペしていますが、そのままでは枠線がありません。

そこで、まず四隅切り落としを実現しているグラーデーションを利用して、四隅に線を表現します。
以下は内側のdivタグを削除し、.frame_octのbefore/after疑似要素を削除したものです。

春はあけぼの。やうやう白くなりゆく山ぎはすこしあかりて、むらさきだちたる雲のほそくたなびきたる。

夏は夜。月のころはさらなり、やみもなほ、ほたる飛びちがひたる。また、ただ一つ二つなど、ほのかにうち光りて行くもをかし。雨など降るもをかし。

.frame_octのbefore/after疑似要素を復活すると、下のようになります。
左右の線は.frame_octだけでは望む位置に表示できないので、内側にdivタグを追加して、表示させます。

春はあけぼの。やうやう白くなりゆく山ぎはすこしあかりて、むらさきだちたる雲のほそくたなびきたる。

夏は夜。月のころはさらなり、やみもなほ、ほたる飛びちがひたる。また、ただ一つ二つなど、ほのかにうち光りて行くもをかし。雨など降るもをかし。

border-imageという選択肢

八角形画像

border-imageを使う方法もあります。左のsvg画像を使って、試してみましょう。
htmlの構造は同じです。

春はあけぼの。やうやう白くなりゆく山ぎはすこしあかりて、むらさきだちたる雲のほそくたなびきたる。

夏は夜。月のころはさらなり、やみもなほ、ほたる飛びちがひたる。また、ただ一つ二つなど、ほのかにうち光りて行くもをかし。雨など降るもをかし。

cssは以下のようになります。
最新ブラウザでは不要なようなので、ベンダープレフィックスは省略しています。

.frame_oct {
    border-style: solid;
    border-width: 20px;
    border-image: url(ここに画像ファイルパス) 20 20 round;
    image-rendering: crisp-edges;
}

.frame_oct > div {background: #fdf0f7;}

border-imageの参考情報。

ついでにSVG関連情報。

なお、svg画像はローカル環境で表示されていても、サーバーの設定によっては表示されない場合があります。
また、gulpで画像ファイルを圧縮していると圧縮し過ぎで表示されない場合があるので、適宜設定してください。

その他参考になりそうなリンク

更新記録
  • 2019/10/09 svg画像についてサーバーにアップする際の注意点追記

Top

go to homeindex

go to home

© 2019 coder's log :: コーダー日誌