要素の枠をbackground画像で作成する場合のスタイル (高さ可変対応)

[ ID : 448 ]
要素の枠をbackground画像で作成する場合のスタイル (高さ可変対応)

概要

コンテンツの高さが可変する背景画像を利用した複雑な枠のスタイルの指定方法。

用途

  • CSSのみで表現できない複雑な枠のためスライス画像で対応する
  • 中のコンテンツによって高さが伸縮する

検証ブラウザ

  • Microsoft Edge(最新)
  • IE11
  • IE10
  • Google Chrome(最新)
  • Safari(最新)
  • Firefox(最新)

実装方法


HTML

<div class="c-block">
    <p class="c-block__txt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>

SCSS

.c-block {
position: relative;
box-sizing: border-box;
width: 25vw;//任意
padding: 0 3vw;//任意
background: url(https://konocode.jp/img/common/dummy_frame_middle.gif) center center / 100% auto repeat-y;
margin: 6vw auto;//画像サイズによって編集

&::before,
&::after {
content: "";
position: absolute;
left: 0;
display: block;
width: 100%;
height: 6vw;//画像サイズによって編集
background-position: center center;
background-repeat: no-repeat;
background-size: 100% auto;
}

&::before {
top: -5.9vw;//画像サイズによって編集
background-image: url(https://konocode.jp/img/common/dummy_frame_top.gif);
}

&::after {
bottom: -5.9vw;//画像サイズによって編集
background-image: url(https://konocode.jp/img/common/dummy_frame_bottom.gif);
}
}

CSS

.c-block {
  position: relative;
  box-sizing: border-box;
  width: 25vw;
  padding: 0 3vw;
  background: url(https://konocode.jp/img/common/dummy_frame_middle.gif) center center / 100% auto repeat-y;
  margin: 6vw auto;
}

.c-block::before,
.c-block::after {
  content: "";
  position: absolute;
  left: 0;
  display: block;
  width: 100%;
  height: 6vw;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% auto;
}

.c-block:before {
  top: -5.9vw;
  background-image: url(https://konocode.jp/img/common/dummy_frame_top.gif);
}

.c-block:after {
  bottom: -5.9vw;
  background-image: url(https://konocode.jp/img/common/dummy_frame_bottom.gif);
}

.c-block__txt {
  text-align: justify;
}

この記事をシェアする

新着記事

全ての記事を見る

KONOCODEのメリット 無料会員登録