将线性背景色应用于CSS中的一组六边形 [英] Applying a linear background colour to a group of hexagons in CSS

问题描述

我已经在HTML和CSS中构建了一个六边形网格，并且我试图获得一个线性渐变以覆盖整个网格.我用于十六进制网格的HTML和CSS如下:

  .hex {向左飘浮;右边距:-26px;底边距:-50px;}.hex .left {向左飘浮;宽度:0;右边框:30px实心#6C6;border-top:52px透明的纯色；边框底部:52px纯透明；}.hex .middle {向左飘浮;宽度:60像素；高度:104像素；背景:#6C6；}.hex .right {向左飘浮;宽度:0;左边框:30px实心#6C6；border-top:52px透明的纯色；边框底部:52px纯透明；}.hex-row {清除:左；}.hex.even {边距顶部:53像素;}.top-hex {左边距: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中寻找解决方案，并遇到了

有什么方法可以将黑白渐变仅应用到六边形上吗?

解决方案

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

  .container {宽度:310像素；边距:0 20px;text-align:center;}.container div {显示:行内块；宽度:120像素；高度:104像素；边距:0 -15px;剪切路径:多边形(25％0％，75％0％，100％50％，75％100％，25％100％，0％50％);背景:线性渐变(45度，红色，蓝色)固定；}.container div:nth-​​child(1)，.container div:nth-​​child(3)，.container div:nth-​​child(4)，.container div:nth-​​child(6){margin-top:54px;底边距:-54px;}  

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

如果您不希望通过滚动条固定背景，也可以像下面这样:

  .container {宽度:310像素；边距:0 20px;text-align:center;位置:相对；/*不在div内*/}.container div {显示:行内块；宽度:120像素；高度:104像素；边距:0 -15px;剪切路径:多边形(25％0％，75％0％，100％50％，75％100％，25％100％，0％50％);}.container div ::之前{内容:"";位置:绝对；顶:0;左:0;对:0;底部:0;背景:线性渐变(45度，红色，蓝色)；}.container div:nth-​​child(1)，.container div:nth-​​child(3)，.container div:nth-​​child(4)，.container div:nth-​​child(6){margin-top:54px;底边距:-54px;}  

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

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?

解决方案

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>

这篇关于将线性背景色应用于CSS中的一组六边形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！