如何在自定义布局中加入 CSS 六边形元素？
Posted
技术标签:
【中文标题】如何在自定义布局中加入 CSS 六边形元素？【英文标题】：How can you join CSS hexagon elements in a custom layout? 【发布时间】：2018-07-08 03:07:07 【问题描述】：这是我想要实现的布局：
我用这个 css 创建了六边形：
.hexagon
width: 100px;
height: 55px;
background: red;
position: relative;
display:inline-block;
margin:0.2em;
.hexagon:before
content: "";
position: absolute;
top: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 25px solid red;
.hexagon:after
content: "";
position: absolute;
bottom: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solid red;
但是，我正在寻找如何用图像填充它们。 这是一支笔：https://codepen.io/1istbesser/pen/ddypXK
如何将图像放在六边形内以使其覆盖所有内容？如果我在#hexagon1 上使用背景图像，图像只覆盖中间部分。
【问题讨论】：
请分享您的背景图片网址。在 codepen 中它没有显示 您可以使用例如 via.placeholder.com/350x150 来处理此类问题 ***.com/a/7437345/8047253 有不同的方法 CSS Image size, how to fill, not stretch?的可能重复 @JeremyThille 为什么你认为它是重复的？我没有看到任何关系 【参考方案1】：我编写了这段代码
Codepen
我改变了你绘制元素的方式，而不是添加了红色的边框顶部，我添加了带有背景的边，但是你需要知道页面的背景颜色才能做到这一点，所以我把图片放在盒子上面，把前后放在图片上面
CSS
*
background-color:black;
section
margin-top:3em;
display:flex;
flex-flow: column;
align-items: center;
.hexagon
width: 100px;
height: 110px;
background: red;
position: relative;
display:inline-block;
margin:0.2em;
overflow: hidden;
.hexagon img
position: absolute;
left: 50%;
top: 50%;
min-width: 100%;
min-height: 100%;
height: 100%;
transform: translate(-50%, -50%);
z-index: 1;
.hexagon:before
content: "";
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
border-right: 50px solid black;
border-left: 50px solid black;
border-bottom: 25px solid transparent;
z-index: 2;
.hexagon:after
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 0;
border-right: 50px solid black;
border-left: 50px solid black;
border-top: 25px solid transparent;
z-index: 2;
.row
margin-top:1.3em;
.hexagon#hexagon2
background-color: purple;
.hexagon#hexagon2:before
border-bottom-color: purple;
.hexagon#hexagon2:after
border-top-color: purple;
.hexagon#hexagon3
background-color: white;
.hexagon#hexagon3:before
border-bottom-color: white;
.hexagon#hexagon3:after
border-top-color: white;
.hexagon#hexagon4
background-color: orange;
.hexagon#hexagon4:before
border-bottom-color: orange;
.hexagon#hexagon4:after
border-top-color: orange;
【讨论】：
你说得对，你可以将margin-top: -13px 放在.row 中，但不会那么接近
因为你使用了纯色，所以无法关闭它们【参考方案2】：
如果你想使用图片作为背景，你需要考虑另一种方式。您依赖于伪元素，因此您的六边形不是 one 元素，因此您不能使用背景图像覆盖整个区域。
这是一个使用clip-path的想法：
*
background-color: black;
section
margin-top: 3em;
display: flex;
flex-flow: column;
align-items: center;
.hexagon
width: 100px;
height: 100px;
background: url(https://lorempixel.com/100/100/) 0 0/cover no-repeat;
position: relative;
display: inline-block;
margin: -10px 0.2em;
-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
<section>
<div class="row">
<div class="hexagon" id="hexagon1"></div>
<div class="hexagon" id="hexagon2"></div>
<div class="hexagon" id="hexagon3"></div>
<div class="hexagon" id="hexagon4"></div>
</div>
<div class="row">
<div class="hexagon" id="hexagon5"></div>
<div class="hexagon" id="hexagon6"></div>
<div class="hexagon" id="hexagon7"></div>
<div class="hexagon" id="hexagon8"></div>
<div class="hexagon" id="hexagon9"></div>
</div>
</section>【讨论】：
剪辑路径不错，但据我所知并非所有浏览器都支持？ @NemanjaGrabovac 我会说它现在得到很好的支持caniuse.com/#search=clip-path 但我们仍然有 IE 问题 :) 所以我们可以将其视为现代浏览器的潜在解决方案 哦，上次我检查时，我认为 safari 也不支持它，但是呃，edge 和 IE ......没有什么好东西可以在那里工作:) @NemanjaGrabovac Safari 通过 -webkit- 部分支持它......我什至不关心微软的东西 :) 他们生活在另一个世界 微软的存在是为了让我们创建一个ie.css【参考方案3】：您将遇到的问题是，使用 CSS 三角形创建六边形实际上会生成填充了一个或两个边框（其余透明）的方形框。这有两个效果：
-
您不能轻易地将图像放入填充边框中以使其被剪裁。
您不能使六边形（只有六边形）可点击：整组矩形始终是可点击的，这会使您的布局在它们重叠的地方变得棘手。
您将需要能够产生实际六边形的东西。带有剪辑路径的内联 SVG 非常适合 - 与 CSS 中的 clip-path 不同，它几乎在任何 SVG 所在的地方都受支持。这是一个例子：
<svg class="svg-graphic" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" version="1.1">
<defs>
<clipPath id="hexagonal-mask">
<polygon points="300,150 225,280 75,280 0,150 75,20 225,20" />
</clipPath>
</defs>
<image clip-path="url(#hexagonal-mask)" xlink:href="https://i.imgur.com/grp9BU1.png" preserveAspectRatio="xMidYMin slice"/>
</svg>这里有一个更详细的例子，展示了可点击的六边形，以及剪辑路径定义的重用：
.svg-template
position: absolute;
.honeycomb
list-style: none;
margin: 0;
padding: 0;
position: relative;
width: 1200px;
height: 1200px;
border: 1px solid #DDD;
.honeycomb li
margin: 0;
padding: 0;
position: absolute;
.honeycomb li:nth-child(1)
top: 0;
left: 0;
.honeycomb li:nth-child(2)
top: 0;
left: 290px;
.honeycomb li:nth-child(3)
top: 0;
left: 580px;
.honeycomb li:nth-child(4)
top: 240px;
left: 145px;
.honeycomb li:nth-child(5)
top: 240px;
left: 435px;
.honeycomb li:nth-child(6)
top: 240px;
left: 725px;
.honeycomb li a
cursor: pointer;
.honeycomb li a:hover image
opacity: 0.5;
<svg class="svg-template" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" version="1.1">
<defs>
<clipPath id="hexagonal-mask">
<polygon points="50 0, 95 25, 95 75, 50 100, 5 75, 5 25" />
</clipPath>
</defs>
</svg>
<ul class="honeycomb">
<li>
<svg viewBox="0 0 100 100" >
<a href="#something">
<image clip-path="url(#hexagonal-mask)" xlink:href="https://i.imgur.com/grp9BU1.png"/>
</a>
</svg>
</li>
<li>
<svg viewBox="0 0 100 100" >
<a href="#something">
<image clip-path="url(#hexagonal-mask)" xlink:href="https://i.imgur.com/grp9BU1.png"/>
</a>
</svg>
</li>
<li>
<svg viewBox="0 0 100 100" >
<a href="#something">
<image clip-path="url(#hexagonal-mask)" xlink:href="https://i.imgur.com/grp9BU1.png"/>
</a>
</svg>
</li>
<li>
<svg viewBox="0 0 100 100" >
<a href="#something">
<image clip-path="url(#hexagonal-mask)" xlink:href="https://i.imgur.com/grp9BU1.png"/>
</a>
</svg>
</li>
<li>
<svg viewBox="0 0 100 100" >
<a href="#something">
<image clip-path="url(#hexagonal-mask)" xlink:href="https://i.imgur.com/grp9BU1.png"/>
</a>
</svg>
</li>
<li>
<svg viewBox="0 0 100 100" >
<a href="#something">
<image clip-path="url(#hexagonal-mask)" xlink:href="https://i.imgur.com/grp9BU1.png"/>
</a>
</svg>
</li>
</ul>【讨论】：
【参考方案4】：您可以做的是绘制一个 SVG，然后将图像作为 mask 放入 css 中
https://codepen.io/noahblon/post/coloring-svgs-in-css-background-images
*
background-color:black;
section
margin-top:3em;
display:flex;
flex-flow: column;
align-items: center;
.hexagon
width: 100px;
height: 110px;
background: red;
position: relative;
display:inline-block;
margin:0.2em;
-webkit-mask:url(https://svgshare.com/i/5Fk.svg) no-repeat 50% 50%;
mask:url(https://svgshare.com/i/5Fk.svg) no-repeat 50% 50%;
background-image: url('https://img1.ibxk.com.br/2017/07/13/13160112901226.jpg?w=700');
background-size: cover;
background-position: center;
.row
text-align: center;
margin-top: -25px
<section>
<div class="row">
<div class="hexagon" id="hexagon1"></div>
<div class="hexagon" id="hexagon2"></div>
<div class="hexagon" id="hexagon3"></div>
<div class="hexagon" id="hexagon4"></div>
<div class="row">
<div class="hexagon" id="hexagon5"></div>
<div class="hexagon" id="hexagon6"></div>
<div class="hexagon" id="hexagon7"></div>
</div>
<div class="row">
<div class="hexagon" id="hexagon8"></div>
<div class="hexagon" id="hexagon9"></div>
</div>
</section>【讨论】：
这是我 POV 的一个干净选项。您可以使用另一个 svg 蒙版轻松切换并创建新设计。来自我的 +1以上是关于如何在自定义布局中加入 CSS 六边形元素？的主要内容，如果未能解决你的问题，请参考以下文章