将线性背景颜色应用于 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>

我尝试四处寻找解决方案，并遇到了Multiple.js 方法。我试图申请的：

.hex-gradient {
    background-image: linear-gradient(white, black);
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* <- here it is */
    width: 100px;
    height: 100px;
}

但是，正如您在此处看到的那样，这不起作用：

有什么方法可以将黑白渐变应用到六边形？

Answer 1

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

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

.hex .middle {
    float: left;
    width: 60px;
    height: 104px;
    background: linear-gradient(red, yellow);
}

.hex .right {
    float: left;
    width: 0;
    border-left: 30px solid yellow;
    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>

Answer 2

您需要以不同的方式使用渐变。这是一个带有剪辑路径的想法：

.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>