html - 将线性背景颜色应用于 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>
我尝试四处寻找解决方案,并遇到了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%, 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>
推荐阅读
- windows - 如何跟踪选定的进程 ALPC 调用内核模式?
- mysql - 我的 SQL - 日期和第二天下午 6 点之间的时间差异
- c++ - 没有灰色重叠的否定图像
- r - 使用 github API 时如何指定用户代理?
- javascript - 如何制作正则表达式来过滤 URL 模式,使其在 8 个字符通配符和目录斜杠之后终止?
- html - 如何启用在页面加载时选中的第一个复选框并仅显示数据目标 div 并隐藏其他数据,并且一次仅选中一个复选框
- node.js - 无法通过 WebDAV 使用 MS Word 保存 .doc 文件 - 未发送 PUT 请求
- ios - CloudKit:传入的CKNotification反复推送
- node.js - 如何正确读取 philips hue 返回的对象
- kubernetes - 在 kubernetes pod 中访问 Nexus 存储库管理器密码