【初心者でもわかる】某スケッチブック風の交互に2色ずつ背景色を指定する方法

#どうも7noteです。4等分して背景色を交互に2色ずつ指定する方法

某有名スケッチブック風の交互に背景色を指定して、少し斜めにしたものを作ります。

ソース

inex.html

<div class="box">
  <div class="sketchbook"></div>
</div>

style.css

.box {
  width: 100px;     /* 幅を100pxに指定 */
  height: 150px;    /* 高さを150pxに指定 */
  overflow: hidden; /* はみ出た部分を非表示にする */
}

.box .sketchbook {
  width: 200%;  /* 幅を倍のサイズにする */
  height: 200%; /* 高さを倍のサイズにする */
  background-image: linear-gradient(transparent 50%, #FCA428 50%),
    linear-gradient(#FCA428 50%, transparent 50%); /* 黄色の部分を背景に指定 */
  background-repeat: no-repeat; /* 繰り返しはさせない */
  background-size: 50% 100%;    /* 背景の幅を50%、高さを100%に指定 */
  background-position: 0 0, 100% 100%; /* 背景の位置表示を指定 */
  background-color: #0D1E19; /* 黒い(緑)背景を指定 */
  transform: translate(-25%, -20%) rotate(30deg); /* 中心位置を調整 ＆ 30度回転 */
}

まとめ

なかなかきれいに作れます。
サイト全体の背景として使うことも可能です。

見やすいかどうかは、、、気にしないほうがいいですね。
色合い調整すればきれいに見えるかもしれません。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ