Применение линейного градиента цвета фона к группе шестиугольников в CSS

Question

Я построил сетку из шестиугольников в HTML и CSS, и я пытаюсь получить линейный градиент, охватывающий всю сетку. HTML и CSS, которые я использую для сетки из шестиугольников, см. ниже:

.hex {
  float: left;
  margin-right: -26px;
  margin-bottom: -50px;
}

.hex .left {
  float: left;
  width: 0;
  border-right: 30px solid #6C6;
  border-top: 52px solid transparent;
  border-bottom: 52px solid transparent;
}

.hex .middle {
  float: left;
  width: 60px;
  height: 104px;
  background: #6C6;
}

.hex .right {
  float: left;
  width: 0;
  border-left: 30px solid #6C6;
  border-top: 52px solid transparent;
  border-bottom: 52px solid transparent;
}

.hex-row {
  clear: left;
}

.hex.even {
  margin-top: 53px;
}

.top-hex {
  margin-left: 95px;
}

<div class="col hex-gradient">
  <div class="hex-row">
    <div class="hex top-hex">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
  </div>
  <div class="hex-row">
    <div class="hex">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="hex even">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="hex">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
  </div>
  <div class="hex-row">
    <div class="hex">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="hex even">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <div class="hex">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
  </div>
</div>

Я попытался найти решение на SO и наткнулся на метод Multiple.js. Который и попытался применить:

.hex-gradient {
    background-image: linear-gradient(white, black);
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* <- вот здесь */
    width: 100px;
    height: 100px;
}

Однако это не сработало, как вы видите здесь:

Есть ли способ применить черно-белый градиент только к шестиугольникам?

_{Свободный перевод вопроса Applying a linear background colour to a group of hexagons in CSS от участника @Web Develop Wolf.}

Answer 1

Вам нужно сделать это иначе, чтобы использовать градиент. Вот идея с clip-path:

.container {
  width:310px;
  margin:0 20px;
  text-align:center;
}

.container div{
  display:inline-block;
  width:120px;
  height:104px;
  margin:0 -15px;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  background:linear-gradient(45deg,red,blue) fixed;
}

.container div:nth-child(1),
.container div:nth-child(3),
.container div:nth-child(4),
.container div:nth-child(6) {
  margin-top:54px;
  margin-bottom:-54px;
}

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

Также, как показано ниже, если вы не хотите фиксировать фон с помощью прокрутки:

.container {
  width:310px;
  margin:0 20px;
  text-align:center;
  position:relative; /* here not inside the divs */
}

.container div{
  display:inline-block;
  width:120px;
  height:104px;
  margin:0 -15px;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
.container div::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:linear-gradient(45deg,red,blue);
}

.container div:nth-child(1),
.container div:nth-child(3),
.container div:nth-child(4),
.container div:nth-child(6) {
  margin-top:54px;
  margin-bottom:-54px;
}

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

_{Свободный перевод ответа от участника @Temani Afif.}

БЛОГ НА HUSL

Применение линейного градиента цвета фона к группе шестиугольников в CSS

Ответы (1 шт):