【HTML＆CSS】斜め背景と矢印背景

まだまだPHP騒動の余波が続いておりますが…

こちらの方もわりとまだ対応中だったりします(^^;)

あいかわらず、情報流出事件続いておりますし。

大きい会社ほど狙われやすいですよね(^^;)

有名企業は大変だ・・・

全然話は変わりますが、今回は「背景」です。

「斜め」の背景と、「矢印」タイプの背景をご紹介いたします。

■斜め背景

こんな形の斜めデザインの背景です。

意外とデザイナーさん、こういうのを出してくることが多いですよね(^^;)

【HTML】

  <div class="bg-diagonal">
    <div>
～～任意のHTML～～
    </div>
  </div>

【CSS】

/* ■■■■■ 斜め背景 ■■■■■ */
.bg-diagonal {
    position: relative;
    margin: 80px 0 160px;
    padding: 40px 10px;
    background: #dff;
}
.bg-diagonal:before {
    content: "";
    display: block;
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    background: #fdc;
transform: skew(0,-8deg);
}
.bg-diagonal > div {
    position: relative;
    z-index: 2;
    min-height: 400px;
}

【解説】

分かりやすいように、親のBOXは水色背景（background: #dff;）にしてあります。

斜め背景のみにしたい場合は、background: transparent; に変更してください。

:before 疑似要素をブロック化、position:absolute で背景として使用します。

で、それを transform: skew（スキュー）で、傾けます。

子要素に div を入れ、それを :before よりも上に表示（z-indexなどで）されるようにすれば完成です。

※検索すると、rotate で斜めを実現しているCSSなどが出てきたりしますが、skew の方が圧倒的にやりやすいと思います。

■矢印背景（背景画像込み）

こんな形の矢印っぽい背景です。

なんかスクロールしてほしい時にこういうデザインにしたりしますよねｗ

【HTML】

  <div class="bg-arrow">
    <div>
～～任意のHTML～～
    </div>
  </div>

【CSS】

.bg-arrow {
    position: relative;
     margin: 80px 0 160px;
     padding: 7vw 10px;
     background: url(./img/05.jpg) no-repeat center center;
     background-size: 100%;
clip-path: polygon(0 0, 50% 5vw, 100% 0, 100% calc(100% - 5vw), 50% 100%, 0 calc(100% - 5vw));
}
.bg-arrow > div {
     position: relative;
     z-index: 2;
     min-height: 500px;
}

【解説】

今回は「clip-path」を使用しております。

これ、とても優秀で…好きな形に切り抜けるんですよね。

clip-path に関しては、検索すればとても詳しく解説しているサイトもありますので、今回は矢印背景のみに焦点を合わせていただきました。

・・・賢明な方ならお気づきでしょうけれども、

clip-path でもちろん斜め背景もできます。

ただ、「斜め背景」に関しては、skew(0,-8deg); の値を変えるだけで角度を調節出来てやりやすいので、こちらをご紹介させていただきました。

やり方とか、いろんな方法を知っていると引き出しが多くなって制作の際に重宝しますよね♪