在CSS

问题描述

我已经在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; /* <- here it is */
    width: 100px;
    height: 100px;
}

但是，如您在此处看到的那样，该方法不起作用：

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

解决方法

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

.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%,0% 50%);
}
.container div::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:linear-gradient(45deg,blue);
}

.container div:nth-child(1),.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>

,

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