如何将菱形盒子彼此相邻放置而没有任何间隙？

Question

如何将菱形盒子彼此相邻放置而没有任何间隙？ 我希望红色菱形盒子出现在间隙内而不是彼此之下......怎么做呢？

＆＃13;

＆＃13;

    .container{width:600px;border:1px solid red;float:none;margin:0 auto;}
     .diamond {
width: 120px;
height: 120px;
background: #1eff00 ;
 /* Rotate */
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
/* Rotate Origin */
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
 float:left;
 margin: 0 50px 50px 0;
 }
  .diamond2{background:red;}

＆＃13;

  <div class="container">
    <div class="diamond"></div>
    <div class="diamond"></div>
    <div class="diamond"></div>
    <div class="diamond diamond2"></div>
    <div class="diamond diamond2"></div>
    <div class="diamond diamond2"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

.container{width:600px;border:1px solid red;float:none;margin:0 auto;}
     .diamond {
width: 120px;
height: 120px;
background: #1eff00 ;
 /* Rotate */
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
/* Rotate Origin */
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
 float:left;
 margin: 0 60px 60px 0;
 }
  .diamond2{background:red;}

<div class="container">
    <div class="diamond"></div>
    <div class="diamond"></div>
    <div class="diamond"></div>
    <div class="diamond diamond2"></div>
    <div class="diamond diamond2"></div>
    <div class="diamond diamond2"></div>
</div>