将背景图像放在45度旋转的div中

Question

我正在尝试创建类似下图的内容。

图像水平但div处于旋转状态。任何人都可以帮助我吗？

Answer 1

当然可以！这将在IE9 +以及所有其他现代浏览器中正常工作。

归功于Craig Buckler's doc on applying CSS3 transformations to background images

＆＃13;

＆＃13;

#myelement {
  position: relative;
  overflow: hidden;
  width: 100px;
  height: 100px;
  margin: 20px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#myelement:before {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  z-index: -1;
  background: url('https://placeimg.com/200/200/any') 0 0 repeat;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

＆＃13;

<div id="myelement"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

非常简单。试试这个

.square {
  width: 100px;
  height: 100px;
  margin: 25px;
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  overflow: hidden;
}
.pic {
  background: url(http://placekitten.com/g/150/150);
  width: 150px;
  height: 150px;
  margin: -25px;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

<div class="square">
  <div class="pic">

  </div>
</div>