how to make a inline hexagon gallery-CodePudding

  .hexagon-gallery {
    margin: auto;
    margin-top: 50px;
    max-width: 1000px;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-auto-rows: 200px;
    padding-bottom: 50px;
  }
  
  .hex {
    display: flex;
    position: relative;
    width: 240px;
    height: 265px;
    background-color: #424242;
    -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  }
  
  .hex:first-child {
    grid-row-start: 1;
    grid-column: 3 / span 2;
  }
  
  .hex:nth-child(2) {
    grid-row-start: 1;
    grid-column: 4 / span 2;
  }
  
  .hex:nth-child(3) {
    grid-row-start: 1;
    grid-column: 6 / span 2;
  }

       <section >
            <div ><img src="https://images.pexels.com/photos/1421264/pexels-photo-1421264.jpeg?cs=srgb&dl=aerial-aerial-photo-aerial-photography-1421264.jpg&fm=jpg" alt="some"></div>
            <div ></div>
            <div ></div>
          </section>

Im trying to aim for something of a similar shape. Hexagon stretched typo shape , idk if there any other easier way to do this.Maybe a rectangle with both sides shaped could work I'm not sure.

CodePudding user response：

Would that work ? I tidied the code a bit to remove extraneous CSS properties.

The main parts are:

clip-path: polygon(85% 0%, 100% 50%, 85% 100%, 15% 100%, 0% 50%, 15% 0%); to get the right shape.
grid-auto-flow: column; and grid-auto-columns: 168px; (which is your .hex width -30%, since the shape cuts 15% on each side) to align the items correctly.`
The z-index which should be in a decrement sequence so each item always cover the next one. If you remove the z-index you'll have the opposite effect (each element covered by the next one), as by default in HTML, an element at the bottom of its group of siblings appears "above" the elements above it.
And just for tidyness grid-auto-rows: 0px; which replace the grid-row-start: 1; on each element.

.hexagon-gallery {
  display: grid;
  grid-auto-rows: 0px;
  grid-auto-columns: 168px;
  grid-auto-flow: column;
}

.hex {
  display: flex;
  width: 240px;
  height: 265px;
  clip-path: polygon(85% 0%, 100% 50%, 85% 100%, 15% 100%, 0% 50%, 15% 0%);
}

.hex:first-child {
  background: red;
  z-index: 1000;
}

.hex:nth-child(2) {
  background: green;
  z-index: 900;
}

.hex:nth-child(3) {
  background: blue;
  z-index: 800;
}

<section >
  <div ><img src="https://images.pexels.com/photos/1421264/pexels-photo-1421264.jpeg?cs=srgb&dl=aerial-aerial-photo-aerial-photography-1421264.jpg&fm=jpg" alt="some"></div>
  <div ></div>
  <div ></div>
</section>

To tweak the shape, modify the 85% and 15% (they should always add up to 100 if you want to keep a symmetric shape).
For example putting 75% and 25% instead will make the angle bigger.
Don't forget to change the grid-auto-columns value to width * (25*2)%, so 120px in this case to keep the correct spacing between each element.
Example with these parameters:

CodePudding user response：

Hello I am not a hundred percent sure that that is what you are looking for, but please take a look.

I used two css custom properties to make it work( --max which refers to max elements per row --order which refers to the order of the element )

.hexagon-gallery {
    --max: 4;

    margin-inline: auto;
    margin-top: 50px;
    max-width: fit-content;
    display: grid;
    grid-template-columns: repeat(var(--max, 1), 1fr);
    grid-auto-rows: 200px;
    padding-bottom: 50px;
  }
  
  .hex {
    display: flex;
    position: relative;
    background-color: #424242;
    width: 200px;
    aspect-ratio: 1 / 1;
    -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    z-index: calc(var(--max, 1) - var(--order, 0));
    overflow: hidden;
  }
  .hex > img {
    max-width: 100%;
    object-fit: cover;
  }
  
  .hex:not(:first-child) {
    transform: translateX(calc(calc(var(--order, 1) - 1) * -40%));
  }

<section >
  <div  style="--order: 1;"><img src="https://images.pexels.com/photos/1421264/pexels-photo-1421264.jpeg?cs=srgb&dl=aerial-aerial-photo-aerial-photography-1421264.jpg&fm=jpg" alt="some"></div>
  <div  style="--order: 2;"><img src="https://images.pexels.com/photos/1421264/pexels-photo-1421264.jpeg?cs=srgb&dl=aerial-aerial-photo-aerial-photography-1421264.jpg&fm=jpg" alt="some"></div>
  <div  style="--order: 3;"><img src="https://images.pexels.com/photos/1421264/pexels-photo-1421264.jpeg?cs=srgb&dl=aerial-aerial-photo-aerial-photography-1421264.jpg&fm=jpg" alt="some"></div>
  <div  style="--order: 4;"><img src="https://images.pexels.com/photos/1421264/pexels-photo-1421264.jpeg?cs=srgb&dl=aerial-aerial-photo-aerial-photography-1421264.jpg&fm=jpg" alt="some"></div>
</section>

CodePudding user response：

You will need to compute the z-index for the active slide and each subsequent slide from the left and the right. The active hexagon will have the highest z-index. The hexagons furthest away (left and right), will have a much lower z-index; much like a bell curve.

Tip: There is a play/pause button below the carousel (scroll-down).

const
  gallery = document.querySelector('.hexagon-gallery'),
  slides = gallery.querySelectorAll('.hex'),
  refreshRate = 2000;
let activeIndex = 0, intervalId;

const update = () => {
  for (let i = 0; i < slides.length; i  ) {
    const
      slide = slides[i],
      newIndex = ((slides.length - i)   activeIndex) % slides.length,
      zIndex = ((activeIndex - Math.abs(activeIndex - i))   slides.length) * 100;
    slide.style.zIndex = zIndex;
    slide.classList.remove('active');
  }
  activeIndex = (activeIndex   1) % slides.length;
  slides[activeIndex].classList.add('active');
};

const play = () => {
  intervalId = setInterval(update, refreshRate);
};

const pause = () => {
  if (intervalId) {
    clearInterval(intervalId);
    intervalId = null;
  }
};

const toggleAction = (e) => {
  if (intervalId) {
    pause() ; e.target.textContent = 'Play';
  } else {
    play()  ; e.target.textContent = 'Pause';
  }
}

document.querySelector('[data-action="pause"]').addEventListener('click', toggleAction);

play();

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1em;
  background: #222;
}

.hexagon-gallery {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-auto-rows: 120px;
  max-width: 360px;
}

.hex {
  display: flex;
  position: relative;
  width: 120px;
  height: 120px;
  background-color: #424242;
  -webkit-clip-path: polygon(15% 0%, 85% 0%, 100% 50%, 85% 100%, 15% 100%, 0% 50%);
  clip-path: polygon(15% 0%, 85% 0%, 100% 50%, 85% 100%, 15% 100%, 0% 50%);
}

.hex:nth-child(1) {
  grid-row-start: 1;
  grid-column: 1 / span 2;
}
.hex:nth-child(2) {
  grid-row-start: 1;
  grid-column: 2 / span 2;
}
.hex:nth-child(3) {
  grid-row-start: 1;
  grid-column: 3 / span 2;
}
.hex:nth-child(4) {
  grid-row-start: 1;
  grid-column: 4 / span 2;
}
.hex:nth-child(5) {
  grid-row-start: 1;
  grid-column: 5 / span 2;
}

<section >
  <div >
    <img
      src="https://images.pexels.com/photos/1421264/pexels-photo-1421264.jpeg"
      alt="Beach">
  </div>
  <div >
    <img
      src="https://images.pexels.com/photos/54323/rose-composites-flowers-spring-54323.jpeg"
      alt="Rose">
  </div>
  <div >
    <img
      src="https://images.pexels.com/photos/102104/pexels-photo-102104.jpeg"
      alt="Apple">
  </div>
  <div >
    <img
      src="https://images.pexels.com/photos/1343537/pexels-photo-1343537.jpeg"
      alt="Lemon">
  </div>
  <div >
    <img
      src="https://images.pexels.com/photos/3686216/pexels-photo-3686216.jpeg"
      alt="Flower">
  </div>
</section>
<button data-action="pause">Pause</button>