title: possible to get to get 12 pieces split instead of 4 in circle gallery?
body: <p>I have some code which displays 4 images as segments within a circle gallery. How can I split the circle into 12 images instead of 4? I tried to add one more part with div but every new image was placed outside of the circle gallery.</p>
  <p>Please tell me how I can work with this or if I should try another way to achieve the desired outcome. If there is another way I would appreciate it if you guide me there.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    box-sizing: border-box;
  }
  
  body{
    align-items: center;
    background-color: #333;
    display: flex;
    height: 100vh;
    justify-content: center;
  }
  
  .gallery {
    display: flex;
    flex-wrap: wrap;
    min-height: 500px;
    min-width: 500px;
    transform: rotate(45deg);
  }
  
  .photo {
    position: relative;
    background-size: cover;
    flex: 50%;
    overflow: hidden;
    transition: transform .3s ease-out;
  }
  
  img {
    position: absolute;
    top: -190px;
    left: -90px;
    transform: rotate(-45deg);
  }
  
  .photo-1 {
    border-top-left-radius: 100%;
  }
  .photo-1:hover {
      transform: translate(-25px, -25px) scale(1.08);
  }
  
  .photo-2 {
    border-top-right-radius: 100%;
  }
  .photo-2:hover {
      transform: translate(25px, -25px) scale(1.08);
  }
  
  .photo-3 {
    border-bottom-left-radius: 100%;
  }
  .photo-3:hover {
      transform: translate(-25px, 25px) scale(1.08);
  }
  
  .photo-4 {
    border-bottom-right-radius: 100%;
  }
  .photo-4:hover {
      transform: translate(25px, 25px) scale(1.08);
  }
  
  .photo-5{
    border-top-left-radius: 100%;
  }
  .photo-5:hover {
      transform: translate(25px, 25px) scale(1.08);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="gallery"&gt;
    &lt;div class="photo photo-1"&gt;
      &lt;img src="https://images.unsplash.com/photo-1461534204375-bd3ba51cca78?w=500&amp;h=500&amp;q=80&amp;fit=crop" alt="" /&gt;
    &lt;/div&gt;
    &lt;div class="photo photo-2"&gt;
      &lt;img src="https://images.unsplash.com/photo-1423483641154-5411ec9c0ddf?w=500&amp;h=500&amp;q=80&amp;fit=crop" alt="" /&gt;
    &lt;/div&gt;
    &lt;div class="photo photo-3"&gt;
      &lt;img src="https://images.unsplash.com/photo-1464454709131-ffd692591ee5?w=500&amp;h=500&amp;q=80&amp;fit=crop" alt="" /&gt;
    &lt;/div&gt;
    &lt;div class="photo photo-4"&gt;
      &lt;img src="https://images.unsplash.com/photo-1479064578521-1eebbb96eca1?w=500&amp;h=500&amp;q=80&amp;fit=crop" alt="" /&gt;
    &lt;/div&gt;
  &lt;/div&gt;
    </code></pre>
  </div>
  </div>
  </p>