title: Triangular images in a shape of a diamond
body: <p>I'm pretty new at this, and I am having some issues with positioning some images the way I want it.
  This is what I want:</p>
  
  <p><img src="https://i.stack.imgur.com/amrnm.jpg" alt="enter image description here"></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>a:link: 
  a:visited: 
  a:hover
  
  .thumbnail {
      border: 0 none;
      box-shadow: none;
  }
  
  /*
  Element width position calculated with:
  (((1-((229/2)*x+(20*y))/1080)/2)+((229/2+20)/1080)*z)*100
  
  x = number of triangles in row
  y = number of spaces between triangles
  z = triangle number from starting postion left -1
  
  Vertical:
  (((1-(844/1080))/2)+((196+20)/1080)*z)*100
  */
  
  body {
      background: url(Resources/forside_baggrund.jpg) no-repeat center center fixed; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
  }
  
  .Diamond {
      width: 1080px;
      height: 1080px;
      margin: 0 auto;
      position: relative;
      background-color:transparent;
  }
  
  .Diamond img {
      width: 229px;
      height: 196px;
      position:absolute;
  }
  
  .room {
      width: 114.5px;
      height: 131px;
      position:absolute;
      background-color:transparent;
      left: 50%;
      top: 36%;
  }
  
  .info {
      width: 114.5px;
      height: 131px;
      position:absolute;
      background-color:transparent;
      left: 37.3%;
      top: 56%;
  }
  
  .language {
      width: 114.5px;
      height: 131px;
      position:absolute;
      background-color:transparent;
      left: 50%;
      top: 51%;
  }
  
  .kursus {
      width: 114.5px;
      height: 131px;
      position:absolute;
      background-color:transparent;
      left: 62.2%;
      top: 56%;
  }
  
  /* Top Row */
  .Diamond&gt;:first-child {
      left: 32.2453703704%;
      top: 10.9259259259%;
  }
  
  .Diamond&gt;:nth-child(2) {
      left: 44.6990740741%;
      top: 10.9259259259%;
  }
  
  .Diamond&gt;:nth-child(3) {
      left: 57.1527777778%;
      top: 10.9259259259%;
  }
  
  /* Second Row */
  .Diamond&gt;:nth-child(4) {
      left: 19.7916666667%;
      top: 30.9259259259%;
  }
  
  .Diamond&gt;:nth-child(5) {
      left: 32.2453703704%;
      top: 30.9259259259%;
  } 
  
  .Diamond&gt;:nth-child(6) {
      left: 44.6990740741%;
      top: 30.9259259259%;
  }
  
  .Diamond&gt;:nth-child(7) {
      left: 57.1527777778%;
      top: 30.9259259259%;
  }
  
  .Diamond&gt;:nth-child(8) {
      left: 69.6064814815%;
      top: 30.9259259259%;
  }
  
  /* Third Row */
  .Diamond&gt;:nth-child(9) {
      left: 7.33796296296%;
      top: 50.9259259259%;
  }
  
  .Diamond&gt;:nth-child(10) { 
      left: 19.7916666667%;
      top: 50.9259259259%;
  } 
  
  .Diamond&gt;:nth-child(11) {
      left: 32.2453703704%;
      top: 50.9259259259%;
  }
  
  .Diamond&gt;:nth-child(12) {
      left: 44.6990740741%;
      top: 50.9259259259%;
  }
  
  .Diamond&gt;:nth-child(13) {
      left: 57.1527777778%;
      top: 50.9259259259%;
  }
  
  .Diamond&gt;:nth-child(14) {
      left: 69.6064814815%;
      top: 50.9259259259%;
  }
  .Diamond&gt;:nth-child(15) {
      left: 82.0601851852%;
      top: 50.9259259259%;
  }
  
  /* Fourth Row */
  .Diamond&gt;:nth-child(16) {
      left: 7.33796296296%;
      top: 70.9259259259%;
  }
  
  .Diamond&gt;:nth-child(17) { 
      left: 19.7916666667%;
      top: 70.9259259259%;
  } 
  
  .Diamond&gt;:nth-child(18) {
      left: 32.2453703704%;
      top: 70.9259259259%;
  }
  
  .Diamond&gt;:nth-child(19) {
      left: 44.6990740741%;
      top: 70.9259259259%;
  }
  
  .Diamond&gt;:nth-child(20) {
      left: 57.1527777778%;
      top: 70.9259259259%;
  }
  
  .Diamond&gt;:nth-child(21) {
      left: 69.6064814815%;
      top: 70.9259259259%;
  }
  
  .Diamond&gt;:nth-child(22) {
      left: 82.0601851852%;
      top: 70.9259259259%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE HTML&gt;
  &lt;html lang="en-US"&gt;
  &lt;head&gt;
    &lt;title&gt;www.klejstruplund.dk/Forside&lt;/title&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"&gt;
    &lt;link rel="stylesheet" href="main.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div class="Diamond"&gt;
   &lt;img src="Resources/Triangles/Koekken.png"&gt;
   &lt;img src="Resources/Triangles/Kongelys.png"&gt;
   &lt;img src="Resources/Triangles/Hoene.png"&gt;  
      &lt;img src="Resources/Triangles/Gaardvindue.png"&gt;
   &lt;img src="Resources/Triangles/Sorttomat.png"&gt;
   &lt;img src="Resources/Buttons/Vearelser.png"&gt;
   &lt;img src="Resources/Triangles/View.png"&gt;
   &lt;img src="Resources/Triangles/Besser_Rev.png"&gt;
   &lt;img src="Resources/Triangles/Fidus.png"&gt;
   &lt;img src="Resources/Triangles/Demon.png"&gt;
   &lt;img src="Resources/Buttons/Kursus.png"&gt;
   &lt;img src="Resources/Buttons/Union_Jack.png"&gt;
   &lt;img src="Resources/Buttons/Om_stedet.png"&gt;
   &lt;img src="Resources/Triangles/Drivhus.png"&gt;
   &lt;img src="Resources/Triangles/Indenfor.png"&gt;
   &lt;img src="Resources/Triangles/Mereindenfor.png"&gt;
   &lt;img src="Resources/Triangles/Huset.png"&gt;
   &lt;img src="Resources/Triangles/fidusiovn.png"&gt;
   &lt;img src="Resources/Triangles/Apples.png"&gt;
   &lt;img src="Resources/Triangles/Cabbage.png"&gt;
   &lt;img src="Resources/Triangles/Pond.png"&gt;
   &lt;img src="Resources/Triangles/Filtsommerfugl.png"&gt;
   &lt;a href="#"&gt;&lt;div class="room" alt="Leje af Vaerelse"&gt;&lt;/div&gt;&lt;/a&gt;
   &lt;a href="#"&gt;&lt;div class="info" alt="Information om stedet"&gt;&lt;/div&gt;&lt;/a&gt;
   &lt;a href="#"&gt;&lt;div class="language" alt="Change Language to English"&gt;&lt;/div&gt;&lt;/a&gt;
   &lt;a href="#"&gt;&lt;div class="kursus" alt="Information om kurser"&gt;&lt;/div&gt;&lt;/a&gt;
    &lt;/div&gt;      
  &lt;/body&gt; 
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I've tried to follow different solutions, but all have failed so far, the latest resulted in all the images being placed vertically. 
  I know I could probably make it easier by creating the pattern as an image, but as this is a learning process for me, I want to do it using the tools of CSS.  </p>
  
  <p>After a bit of searching and experimentation, I decided on absolutely positioned images, in a Relatively positioned div:</p>
  
  <p>etc. in all 22 Equilateral triangles. </p>
  
  <p>This resulted in the aforementioned tower of triangles and I decided to get some help before I list my patience. What am I missing?</p>
  
  <p><strong>Update</strong>
  I added the full code for html and css, though since the problem is now solved, it seems slightly superfluous, all I can say is that I now get the result that I want.   </p>
  
  <p>The problem as I was informed, was that I had gotten the selectors backward; thinking .Diamond:nth-child(2) meant the second child of container div class Diamond would be selected. I've now add a ">" between .Diamond and :nth-child(x)/:first-child.
  Silly mistake. </p>