Applying a linear background colour to a group of hexagons in CSS

问题

I've constructed a grid of hexagons in HTML and CSS and I'm trying to get a linear gradient to span across the entire grid. The HTML and CSS I'm using for the hex grid is below:

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

I tried looking around SO for a solution and came across the Multiple.js method. Which I attempted to apply:

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

However this didn't work as you see here:

Is there any way I can apply the black and white gradient to just the hexagons?

回答1:

You need to do it differently to use a gradient. Here is an idea with 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>

Also like below if you don't want the background to be fixed with the scroll:

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

回答2:

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

来源：https://stackoverflow.com/questions/63521596/applying-a-linear-background-colour-to-a-group-of-hexagons-in-css

标签

html

css

linear-gradients