如何解决在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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。