使用纯CSS创建六边形行

debugcn 发表于 Dev

网络开发狼

我有一排使用CSS的六边形，但是我需要在一排中有7个六边形，由于某种原因，它们已被切除（中间的六边形除外），如下所示：

我需要它们看起来更像：

这是我到目前为止的代码：

.hex-container {
  width:310px;
  text-align:center;
  position:relative; 
}

.hex-container div{
  display:inline-block;
  width:120px;
  height:104px;
  margin:0 -13px;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

.hex-container div::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:linear-gradient(45deg, #f09800,#fad900);
}

.hex-container div:nth-child(1),
.hex-container div:nth-child(3),
.hex-container div:nth-child(4),
.hex-container div:nth-child(6) {
  margin-top:54px;
  margin-bottom:-54px;
}

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

这是根据本教程进行修改的，并在我对Stack Overflow提出的一个旧问题的帮助下进行了修改

陪同Afif

去除负边距底部并使用 vertical-align:top

.hex-container {
  width:310px;
  text-align:center;
  position:relative; 
}

.hex-container div{
  display:inline-block;
  vertical-align:top; /* here */
  width:120px;
  height:104px;
  margin:0 -13px;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

.hex-container div::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:linear-gradient(45deg, #f09800,#fad900);
}

.hex-container div:nth-child(odd){
  margin-top:54px;
}

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

以及具有7种形状的完整代码：

.hex-container {
  text-align:center;
  width:700px;
  position:relative; 
}

.hex-container div{
  display:inline-block;
  vertical-align:top; /* here */
  width:120px;
  height:104px;
  margin:0 -13px;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

.hex-container div::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:linear-gradient(45deg, #f09800,#fad900);
}

.hex-container div:nth-child(odd){
  margin-top:54px;
}

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-04-5

我来说两句

0条评论

登录后参与评论

来自分类Dev

在CSS中缩进六边形的偶数行

来自分类Dev

如何使用PowerPoint创建常规六边形？

来自分类Dev

居中CSS六边形

来自分类Dev

基于CSS的六边形内的图像

来自分类Dev

CSS动画六边形菜单

来自分类Dev

内含元素的CSS六边形

来自分类Dev

带有CSS3的六边形

来自分类Dev

CSS3或Canvas圆形六边形

来自分类Dev

内含元素的CSS六边形

来自分类Dev

如何使用带有边框的CSS制作半个六边形形状，矩形在半个六边形的中间带有图像的边框

来自分类Dev

是否有使用Matplotlib创建六边形热图的教程？

来自分类Dev

使用DrawPolygon在C＃中创建一个六边形

来自分类Dev

使用DrawPolygon在C＃中创建一个六边形

来自分类Dev

如何使用CSS制作弯曲边缘的六边形

来自分类Dev

最佳六边形OCR

来自分类Dev

Matplotlib：六边形图中六边形之间的空间？

来自分类Dev

如何创建切出的六边形形状？

来自分类Dev

如何创建带有图像的六边形形状？

来自分类Dev

如何在两个matplotlib六边形图之间创建差异图？

来自分类Dev

如何在带有六边形形状的Latex中创建思维导图？

来自分类Dev

如何为嵌入的Google Maps创建六边形iFrame？

来自分类Dev

如何在python中创建一个六边形随机数？

来自分类Dev

CSS：六边形与div上带有背景图像的文字

来自分类Dev

六边形CSS（带有“箭头效果”的矩形）

来自分类Dev

CSS：带有文本和渐变背景/边框的自适应细长六边形

来自分类Dev

无法在CSS的六边形上获得光滑的egdes

来自分类Dev

CSS：六边形与div上带有背景图像的文字

来自分类Dev

如何为ImageView赋予六边形形状

来自分类Dev

用六边形填充圆

Related 相关文章

文章