html - 旋转正方形作为图像

Question

我是 HTML、CSS 的新手。另外我还在学习，所以请理解。

我正在尝试做一些看起来像这样的艺术画廊:

我在教程的帮助下创建了这个方 block ，但我想升级它并用图像代替方 block ，但我不知道该怎么做。有什么建议吗？

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  background-color: #99CCFF;
}
.container {
  max-width: 1070px;
  padding: 0 30px;
  margin: 0 auto;
}
.diamond {
  width: 11.5%;
  padding-bottom: 11.5%;
  background-color: rgba(255, 255, 255, 0.3);
  display: inline-block;
}
.diamond-big {
  width: 25%;
  padding-bottom: 25%;
  background-color: rgba(255, 255, 255, 0.6);
  display: inline-block;
}
.grid {
  position: relative;
  padding-bottom: 100%;
  transform: rotate(45deg);
  transform-origin: 39%;
}
.grid-section {
  overflow: hidden;
  padding-bottom: 200px;
}
#diamond1 {
  position: absolute;
  top: 25%;
  left: 10.5%;
  cursor: pointer;
}
#diamond2 {
  position: absolute;
  top: 25%;
  left: 24%;
}
#diamond3 {
  position: absolute;
  top: 11.5%;
  left: 37.5%;
}
#diamond4 {
  position: absolute;
  top: 38.5%;
  left: 24%;
}
#diamond5 {
  position: absolute;
  top: 38.5%;
  left: 51%;
}
#diamond6 {
  position: absolute;
  top: 52%;
  left: 51%;
}
#diamond7 {
  position: absolute;
  top: 38.5%;
  left: 64.5%;
}
#diamond8 {
  position: absolute;
  top: 65.5%;
  left: 51%;
}
#diamond9 {
  position: absolute;
  top: 65.5%;
  left: 64.5%;
}

<div class="container">
  <section class="grid-section">
    <div class="grid">
      <div id="diamond1" class="diamond"></div>
      <div id="diamond2" class="diamond"></div>
      <div id="diamond3" class="diamond-big"></div>
      <div id="diamond4" class="diamond-big"></div>
      <div id="diamond5" class="diamond"></div>
      <div id="diamond6" class="diamond"></div>
      <div id="diamond7" class="diamond-big"></div>
      <div id="diamond8" class="diamond"></div>
      <div id="diamond9" class="diamond-big"></div>
    </div>
  </section>
</div>

Answer 1

如果你想让图像易于下载或不想在 css 中使用背景图像，你可以这样做。我在 div 中添加了图像并添加了以下 css:

.diamond {
  width: 11.5%;
  padding-bottom: 11.5%;
  background-color: rgba(255, 255, 255, 0.3);
  display: inline-block;
  position:relative;
  overflow:hidden;
 }

 .diamond img, .diamond-big img 
 { position:absolute;
   left:-25%;
  top:-25%;
   width:150%;
  -ms-transform: rotate(-45deg); /* IE 9 */
  -webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */
  transform: rotate(-45deg);
 }

.diamond-big {
  width: 25%;
  padding-bottom: 25%;
  background-color: rgba(255, 255, 255, 0.6);
  display: inline-block;
  position:relative;
  overflow:hidden;
  }

这使得图像和正方形一样大。

完整代码片段:

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  background-color: #99CCFF;
}
.container {
  max-width: 1070px;
  padding: 0 30px;
  margin: 0 auto;
}
.diamond {
  width: 11.5%;
  padding-bottom: 11.5%;
  background-color: rgba(255, 255, 255, 0.3);
  display: inline-block;
  position:relative;
  overflow:hidden;
 }

.diamond img, .diamond-big img 
{ position:absolute;
  left:-25%;
 top:-25%;
  width:150%;
-ms-transform: rotate(-45deg); /* IE 9 */
-webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */
transform: rotate(-45deg);
}

.diamond-big {
  width: 25%;
  padding-bottom: 25%;
  background-color: rgba(255, 255, 255, 0.6);
  display: inline-block;
  position:relative;
  overflow:hidden;
}
.grid {
  position: relative;
  padding-bottom: 100%;
  transform: rotate(45deg);
  transform-origin: 39%;
}
.grid-section {
  overflow: hidden;
  padding-bottom: 200px;
}
#diamond1 {
  position: absolute;
  top: 25%;
  left: 10.5%;
  cursor: pointer;
}
#diamond2 {
  position: absolute;
  top: 25%;
  left: 24%;
}
#diamond3 {
  position: absolute;
  top: 11.5%;
  left: 37.5%;
}
#diamond4 {
  position: absolute;
  top: 38.5%;
  left: 24%;
}
#diamond5 {
  position: absolute;
  top: 38.5%;
  left: 51%;
}
#diamond6 {
  position: absolute;
  top: 52%;
  left: 51%;
}
#diamond7 {
  position: absolute;
  top: 38.5%;
  left: 64.5%;
}
#diamond8 {
  position: absolute;
  top: 65.5%;
  left: 51%;
}
#diamond9 {
  position: absolute;
  top: 65.5%;
  left: 64.5%;
}

<div class="container">
  <section class="grid-section">
    <div class="grid">
      <div id="diamond1" class="diamond"><img src="http://placehold.it/400x400" alt="alter"/></div>

      <div id="diamond2" class="diamond"><img src="http://placehold.it/400x400" alt="alter"/></div>

      <div id="diamond3" class="diamond-big"><img src="http://placehold.it/400x400" alt="alter"/></div>

      <div id="diamond4" class="diamond-big"><img src="http://placehold.it/400x400" alt="alter"/></div>

      <div id="diamond5" class="diamond"><img src="http://placehold.it/400x400" alt="alter"/></div>

      <div id="diamond6" class="diamond"><img src="http://placehold.it/400x400" alt="alter"/></div>

      <div id="diamond7" class="diamond-big"><img src="http://placehold.it/400x400" alt="alter"/></div>

      <div id="diamond8" class="diamond"><img src="http://placehold.it/400x400" alt="alter"/></div>

      <div id="diamond9" class="diamond-big"><img src="http://placehold.it/400x400" alt="alter"/></div>

    </div>
  </section>
</div>