六边形CSS背景

Question

这不是一个关于如何制作单个元素六边形的问题。已经有很多这方面的内容了。

这是一个问题，想知道是否有一种方法可以创建纯CSS六边形背景。

通过创建三角形，我已经做到了 接近目标：

*{
  margin:0;
  padding:0;
  border-width:0;
}
html{
  height:100%;
}
body{
  height:100%;
  background: repeating-linear-gradient(120deg, transparent 0px, transparent 44px, rgba(0, 85, 130, 0.5) 50px, transparent 56px, transparent 100px), repeating-linear-gradient(240deg, transparent 0px, transparent 44px, rgba(0, 85, 130, 0.5) 50px, transparent 56px, transparent 100px), repeating-linear-gradient(0deg, transparent 0px, transparent 44px, rgba(0, 85, 130, 0.5) 50px, transparent 56px, transparent 100px), #fffcfc;
  background-position:34px, 0, 0;
  background-attachment:fixed,fixed,fixed;
}

但是有几个问题：

1. 背景大小会影响行的位置。
2. 这是三角形，我想不到一种方法来“覆盖”它们形成的六边形内部出现的线条。

是否有办法实现这一点，或者我应该放弃并使用图像？

- Randy Hall

Answer 1

请查看此文章：http://lea.verou.me/css3patterns/#honeycomb

为了使此示例不会因链接失效而无法使用：

body {
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle farthest-side at 0% 50%,#fb1 23.5%,rgba(240,166,17,0) 0)21px 30px,
    radial-gradient(circle farthest-side at 0% 50%,#B71 24%,rgba(240,166,17,0) 0)19px 30px,
    linear-gradient(#fb1 14%,rgba(240,166,17,0) 0, rgba(240,166,17,0) 85%,#fb1 0)0 0,
    linear-gradient(150deg,#fb1 24%,#B71 0,#B71 26%,rgba(240,166,17,0) 0,rgba(240,166,17,0) 74%,#B71 0,#B71 76%,#fb1 0)0 0,
    linear-gradient(30deg,#fb1 24%,#B71 0,#B71 26%,rgba(240,166,17,0) 0,rgba(240,166,17,0) 74%,#B71 0,#B71 76%,#fb1 0)0 0,
    linear-gradient(90deg,#B71 2%,#fb1 0,#fb1 98%,#B71 0%)0 0 #fb1;
    background-size:40px 60px;
}

这是 SCSS 版本（https://jsfiddle.net/ajnd782w/）：

$primary-color: #fb1;
$line-color: #B71;
$transparent: transparent;
$size: 30px;

body {
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle farthest-side at 0% 50%,$primary-color 23.5%,$transparent 0)($size * .7) $size,
    radial-gradient(circle farthest-side at 0% 50%,$line-color 24%,$transparent 0)($size * .6129) $size,
    linear-gradient($primary-color 14%,$transparent 0, $transparent 85%,$primary-color 0)0 0,
    linear-gradient(150deg,$primary-color 24%,$line-color 0,$line-color 26%,$transparent 0,$transparent 74%,$line-color 0,$line-color 76%,$primary-color 0)0 0,
    linear-gradient(30deg,$primary-color 24%,$line-color 0,$line-color 26%,$transparent 0,$transparent 74%,$line-color 0,$line-color 76%,$primary-color 0)0 0,
    linear-gradient(90deg,$line-color 2%,$primary-color 0,$primary-color 98%,$line-color 0%)0 0 $primary-color;
    background-size:($size * 1.333) ($size * 2);
}

永不放弃。 :)

- Jonathan

---

如果有人能使用颜色和大小参数来编写 SCSS，那就更好了！ - Randy Hall

Answer 2

以下是乔纳森的精彩答案，带有变量：

/* source code by Johnathan at:
https://dev59.com/5Kvka4cB1Zd3GeqPqkeE
*/
:root{
    --honeyColor: #fb1;
    --honeyBorderColor: #B71;
    --size: 30px;
}
body {
  width: 100vw;
  height: 100vh;
  display: block;
  position:relative;
  background:
    radial-gradient(circle farthest-side at 0% 50%, var(--honeyColor) 23.5%,transparent 0)calc(var(--size)*0.7) var(--size),
    radial-gradient(circle farthest-side at 0% 50%,var(--honeyBorderColor) 24%,transparent 0)calc(var(--size)*19/30) var(--size),
    linear-gradient(var(--honeyColor) 14%,transparent 0, transparent 85%, var(--honeyColor) 0)0 0,
    linear-gradient(150deg, var(--honeyColor) 24%,var(--honeyBorderColor) 0,var(--honeyBorderColor) 26%,transparent 0,transparent 74%,var(--honeyBorderColor) 0,var(--honeyBorderColor) 76%, var(--honeyColor) 0)0 0,
    linear-gradient(30deg, var(--honeyColor) 24%,var(--honeyBorderColor) 0,var(--honeyBorderColor) 26%,transparent 0,transparent 74%,var(--honeyBorderColor) 0,var(--honeyBorderColor) 76%, var(--honeyColor) 0)0 0,
    linear-gradient(90deg,var(--honeyBorderColor) 2%, var(--honeyColor) 0, var(--honeyColor) 98%,var(--honeyBorderColor) 0%)0 0 var(--honeyColor);
    background-size:calc(var(--size)*4/3) calc(var(--size)*2);

}

- lior bakalo

Answer 3

这里有另一个想法：https://css-pattern.com/#g91

html {
  --s: 37px; /* control the size */
  
  --c:#0000,#2FB8AC /* first color */ .5deg 119.5deg,#0000 120deg;
  --g1:conic-gradient(from  60deg at 56.25% calc(425%/6),var(--c));
  --g2:conic-gradient(from 180deg at 43.75% calc(425%/6),var(--c));
  --g3:conic-gradient(from -60deg at 50%   calc(175%/12),var(--c));
  background:
    var(--g1),var(--g1) var(--s) calc(1.73*var(--s)),
    var(--g2),var(--g2) var(--s) calc(1.73*var(--s)),
    var(--g3) var(--s) 0,var(--g3) 0 calc(1.73*var(--s)) 
    #ECBE13; /* second color */
  background-size: calc(2*var(--s)) calc(3.46*var(--s));
}

- Temani Afif