LoginSignup
17

More than 5 years have passed since last update.

CSS 画像を4分割して表示

Last updated at Posted at 2016-01-10

sample.gif

実際の動作を確認したい人向け
https://jsfiddle.net/junya_5102/851gbwd7/1/


<div class="box-wrap">
  <div class="box tl"></div>
  <div class="box tr"></div>
  <div class="box br"></div>
  <div class="box bl"></div>
</div>



.box-wrap{
  position: relative;

  width: 200px;
  height: 200px;
}

.box{
  position: absolute;

  /* 要素の大きさ 分割数によって調整が必要 */
  width: 50%;
  height: 50%;
  border: 1px solid blue;

  /* 画像 */
  background-image: url(sample.png);
  background-repeat: no-repeat;

  /* 画像の配置位置 ボーターを含めた位置 */
  background-origin: border-box;

  /* 画像の大きさをbox-wrapの大きさに合わせる */
  background-size: 200% 200%;

  box-sizing: border-box;

  /* アニメーション */
  transition: transform 2s,border-color 3s;
}

.tl{
  /* 分割数によって調整が必要 */
  top: 0;
  left: 0;
  background-position: top left;

  transform: rotate(90deg);
}

.tr{
  /* 分割数によって調整が必要 */
  top: 0;
  right: 0;
  background-position: top right;

  transform: rotate(180deg);
}

.br{
  /* 分割数によって調整が必要 */
  bottom: 0;
  right: 0;
  background-position: bottom right;

  transform: rotate(270deg);
}

.bl{
  /* 分割数によって調整が必要 */
  bottom: 0;
  left: 0;
  background-position: bottom left;

  transform: rotate(360deg);
}


.box-wrap:hover > .box{
  transform: none;
  border-color: transparent;
}

background-position 画像表示の位置を指定

background-position: top left; 画像の左上から表示
background-position: top right; 画像の右上から表示
background-position: bottom right; 画像の右下から表示
background-position: bottom left; 画像の左下から表示

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
17