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

时间:2015-12-22 08:39:00

标签: html css web

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

enter image description here

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

2 个答案:

答案 0 :(得分:3)

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

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



#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);
}

<div id="myelement"></div>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

非常简单。试试这个

.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>