css - 六角 CSS 背景
问题描述
这不是关于如何使单个元素形成六边形的问题。有很多这样的。
这是一个问题,看看是否有办法创建纯 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;
}
但是有几个问题:
- 背景大小会影响线条的位置。
- 它是三角形,我想不出一种方法来“覆盖”出现在由它们形成的六边形内部的线条。
有没有办法做到这一点,或者我应该放弃并使用图像?
解决方案
见这篇文章: 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);
}
永不放弃。:)
推荐阅读
- python - 如何对熊猫中的列进行分组?
- java - 使用逗号错误拆分用户输入的每个字符串
- c# - 如何在 C# 中编写具有多个参数的扩展方法?
- java - 为什么我会得到这个异常 java.lang.IllegalArgumentException:Comparison 方法违反了它的一般合同
- r - 如何将多个 pvalues 添加到 ggplot 分组箱线图
- php - PHP多维数组搜索(编辑和保存结果)
- javascript - 如何使用 CSS 调整图像和文本的响应式设计?
- java - 使用令牌从本地运行的 Google Cloud 应用程序检索 Firebase 用户
- php - 使用文件锁确保 PHP 守护程序脚本只运行一次
- python-3.x - 定义一个使用 3 个参数自动生成 k-means 聚类图的函数