css3で作る背景画像の三角形

背景に画像を使った三角形のデザインを組む機会があったので、
まとめ的なやつです。

背景に画像を使った三角形っていうのは、こんな感じ。
(テクスチャのかかった画像を背景に敷いています。)
![01.jpg](https://qiita-image-store.s3.amazonaws.com/0/139029/410f9c47-63a1-2317-cf1d-4ee39ef0843f.jpeg)

三角形の部分を画像で切り出して
imgタグで貼り付け、でも良いんですが、
ここは出来るだけcssで。

ちなみに、背景に画像を使用していない三角形の場合は
borderを使って作ります。

```css:css
.box {
  width: 0;
  height: 0;
  border: 250px solid transparent;
  border-top: 200px solid #fff;
  border-bottom: none;
}
```

![02.jpg](https://qiita-image-store.s3.amazonaws.com/0/139029/b4220b0d-97d2-c183-a296-88a0f26186b9.jpeg)

これを応用して背景に画像を追加してみます。

```css:css
.box {
  width: 0;
  height: 0;
  border: 250px solid transparent;
  border-top: 200px solid #fff;
  border-bottom: none;
  background: url('../img/bg01.gif');
}
```

![03.jpg](https://qiita-image-store.s3.amazonaws.com/0/139029/3460f13b-3a11-fafd-026f-2473994547f5.jpeg)

これだとborderに画像を指定出来ないので、
今度は両端に回転させた要素を追加して
三角形に見せるようにしてみます。

*イメージはこんな感じ。.boxの両端に、回転させた擬似要素を追加します。
![04--02.jpg](https://qiita-image-store.s3.amazonaws.com/0/139029/6e1d3e12-67c1-c670-e8b8-379905164382.jpeg)

```scss:scss
.box {
  width: 500px;
  height: 200px;
  background: url('../img/bg02.gif');
  position: relative; /* boxを基準点にする */
  overflow: hidden; /* はみ出した擬似要素を隠す */
  &::before {
    content: " ";　/* 擬似要素を追加 */
    display: block;
    width: 500px;
    height: 250px;
    background: url('../img/bg01.gif');
    transform: rotate(38.8deg); /* 要素を回転させる */
    transform-origin: left top; /* 回転軸を左上に設定 */
    position: absolute;
    top: 0;
    left: 1px; /* 微調節 */
  }
  &::after {
    content: " "; /* 擬似要素を追加 */
    display: block;
    width: 500px;
    height: 250px;
    background: url('../img/bg01.gif');
    transform: rotate(-38.8deg); /* 要素を回転させる */
    transform-origin: right top; /* 回転軸を右上に設定 */
    position: absolute;
    top: 0;
    right: 1px; /* 微調節 */
  }
}
```

![04.jpg](https://qiita-image-store.s3.amazonaws.com/0/139029/4710ab09-fa11-e22a-3c59-b638696ee271.jpeg)


boxに背景を指定しなければ、
bodyに指定した背景が見えるように。

```scss:scss
.box {
  width: 500px;
  height: 200px;
  position: relative;
  overflow: hidden;
  margin: 100px auto;
  &::before {
    content: " ";
    display: block;
    width: 500px;
    height: 250px;
    background: url('../img/bg01.gif');
    transform: rotate(38.8deg);
    transform-origin: left top;
    position: absolute;
    top: 0;
    left: 1px;
  }
  &::after {
    content: " ";
    display: block;
    width: 500px;
    height: 250px;
    background: url('../img/bg01.gif');
    transform: rotate(-38.8deg);
    transform-origin: right top;
    position: absolute;
    top: 0;
    right: 1px;
  }
}
```
![05.jpg](https://qiita-image-store.s3.amazonaws.com/0/139029/d549bfb0-3339-9539-76a9-d270c08e63e7.jpeg)


一部だけに画像を使うならborderで、
全てに画像を使うなら擬似要素と回転を使って、
と使い分けが出来そうですね。

![06.png](https://qiita-image-store.s3.amazonaws.com/0/139029/f970fad4-b259-3603-e795-e6c33ff48f7a.png)


これを応用して三角形を繋げていけば、
こんなレイアウトも出来ちゃいます。

<p data-height="265" data-theme-id="0" data-slug-hash="ZxXyBV" data-default-tab="css,result" data-user="kfunnytokyo" data-embed-version="2" data-pen-title="Background Image Triangle" class="codepen">See the Pen <a href="https://codepen.io/kfunnytokyo/pen/ZxXyBV/">Background Image Triangle</a> by kayukihashimoto (<a href="https://codepen.io/kfunnytokyo">@kfunnytokyo</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

終わり。