当前位置：首页 > news >正文

CSS 实现六边形柱状图

news 2026/3/30 23:06:01

前言

👏CSS 实现六边形柱状图速速来Get吧~

🥇文末分享源代码。记得点赞+关注+收藏！

1.实现效果

在这里插入图片描述

2.实现步骤

定义全局css变量，柱状宽度为–w，最大高度为–h，柱形整体为渐变色，定义上部分颜色为 --bar-shape，下部分颜色为 --bar-bg

:root{/* 柱形宽度-全局 */--w: 45px;/* 柱形高度最大值 */--h: 300px;/* 柱形上部分颜色 */--bar-shape: rgba(186, 210, 226, 0.9);/* 柱形下部分颜色 */--bar-bg: #f083b6;
}

根据定义的变量，绘制一个矩形

在这里插入图片描述

<div class="bar"><span></span>
</div>

.bar{position: relative;width: var(--w);height: var(--height);background: linear-gradient(to top, var(--bar-bg), var(--bar-shape));
}

定义柱状顶部和底部的六边形颜色,顶部颜色为 --bar-top，底部颜色为 --bar-bg

:root{/* 柱形顶部六边形颜色 */--bar-top: rgb(186, 210, 226);/* 柱形下部分颜色+柱形底部六边形 */--bar-bg: #f083b6;
}

用clip-path裁剪出六边形，定义clip-path裁剪变量–path

:root{/* clip-path裁剪六边形 */--path: polygon(75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%, 25% 0);
}

clip-path：clip-path CSS 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。

在这里插入图片描述

这里我们使用clip-path在线网站，在线拖拽出我们想要的形状

在这里插入图片描述

为该矩形添加前后伪元素，宽度为–w，高度为宽度的40%，用clip-path实现六边形

.bar::before,
.bar::after {content: "";position: absolute;width: var(--w);height: calc(var(--w) / 2.5);clip-path: var(--path);left: 0;
}

设置前伪元素的背景色，top为0，层级为2，置于最上方

在这里插入图片描述

.bar::before {background: var(--bar-top);top: 0;/* 层级置于最上层 */z-index: 2;transform: translateY(-50%);}

设置后伪元素的背景色，bottom为0，层级为-1，置于最下方

在这里插入图片描述

.bar::after {background: var(--bar-bg);bottom: 0;/* 层级置于最下层 */z-index: -1;transform: translateY(50%);
}

用box-shadow给该矩形添加阴影区域，宽度为–w的二分之一，高度设置为101%（保留1%的高度余出），设置absolute定位，bottom设置为底边六边形高度的二分之一，水平居中

在这里插入图片描述

<div class="bar">+ <span></span>
</div>

box-shadow：CSS box-shadow 属性用于在元素的框架上添加阴影效果。你可以在同一个元素上设置多个阴影效果，并用逗号将他们分隔开。该属性可设置的值包括阴影的 X 轴偏移量、Y 轴偏移量、模糊半径、扩散半径和颜色。

在这里插入图片描述

添加box-shadow

在这里插入图片描述

.bar span {position: absolute;--d: calc(var(--w) / 2);--b: calc(var(--w) / -2.5 / 2);width: var(--d);height: 101%;left: calc(50% - var(--d) / 2);bottom: var(--b);box-shadow: 0px -5px 5px var(--bar-line);
}

设置hover事件，并添加过渡效果

在这里插入图片描述

.bar:hover {height: 100%;
}.bar {+ transition: all 1s;
}

定义多个元素，为其设置不同的高度，宽度（颜色小伙伴们可以自行调试哈），就完成啦

在这里插入图片描述

3.实现代码

<style>:root {/* 柱形上部分颜色 */--bar-shape: rgba(186, 210, 226, 0.9);/* 柱形顶部六边形颜色 */--bar-top: rgb(186, 210, 226);/* 柱形下部分颜色+柱形底部六边形 */--bar-bg: #f083b6;/* 柱形线条颜色 */--bar-line: rgba(0, 0, 0, 0.2);/* clip-path裁剪六边形 */--path: polygon(75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%, 25% 0);/* 柱形宽度-全局 */--w: 45px;/* 柱形高度最大值 */--h: 300px;}section {/* flex布局 */display: flex;align-items: flex-end;height: var(--h);}.bar {position: relative;width: var(--w);height: var(--height);margin-right: 20px;background: linear-gradient(to top, var(--bar-bg), var(--bar-shape));transition: all 1s;}.bar:hover {height: 100%;}.bar:last-child {margin-right: 0;}/* bar添加前后伪元素，设置为clip-path裁剪后的六边形 */.bar::before,.bar::after {content: "";position: absolute;width: var(--w);height: calc(var(--w) / 2.5);clip-path: var(--path);left: 0;}.bar::before {background: var(--bar-top);top: 0;/* 层级置于最上层 */z-index: 2;transform: translateY(-50%);}.bar::after {background: var(--bar-bg);bottom: 0;/* 层级置于最下层 */z-index: -1;transform: translateY(50%);}.bar span {position: absolute;--d: calc(var(--w) / 2);--b: calc(var(--w) / -2.5 / 2);width: var(--d);height: 101%;left: calc(50% - var(--d) / 2);bottom: var(--b);box-shadow: 0px -5px 5px var(--bar-line);}
</style>
<body><section><div class="bar" style="--height: 5%; --w: 25px"><span></span></div><div class="bar" style="--height: 60%"><span></span></div><div class="bar" style="--height: 30%; --w: 50px"><span></span></div><div class="bar" style="--height: 60%; --w: 60px"><span></span></div><div class="bar" style="--height: 30%; --w: 30px"><span></span></div><div class="bar" style="--height: 80%; --w: 35px"><span></span></div><div class="bar" style="--height: 10%; --w: 45px"><span></span></div></section>
</body>

4.写在最后🍒

看完本文如果觉得对你有一丢丢帮助，记得点赞+关注+收藏鸭 🍕

CSS 实现六边形柱状图

前言 👏CSS 实现六边形柱状图速速来Get吧~ 🥇文末分享源代码。记得点赞关注收藏！ 1.实现效果 2.实现步骤定义全局css变量，柱状宽度为–w，最大高度为–h，柱形整体为渐变色，定义上部分颜色为…...

编程日记 2023/5/2 12:23:40

什么是推挽输出，开漏输出？

这篇文章是看B站“工科男孙老师”这个视频的笔记推挽开漏高阻这都是谁想出来的词？？ 我觉得讲的很好，做一下笔记 1.什么是IO输出三态一共有：高电平, 低电平，浮空/高阻态三种IO态 2.推挽输出推挽输出能够表示高、…...

编程日记 2023/5/3 16:29:53

【图像分割】Unet系列深度讲解（FCN、UNET、UNET++）

【图像分割】Unet 深度讲解文章目录【图像分割】Unet 深度讲解1. 介绍1.1 背景介绍：1.2 医学图像特点1.3 图像分割是什么2. Unet发展历程（FCN、Unet、Unet）2.1 全卷积网络-FCN2.1.1 FCN介绍：2.1.2 FCN框架2.1.3 反卷积层2.1.4 输…...

编程日记 2023/5/16 16:05:09

list底层的简单实现（万字长文详解！）

list底层的简单实现文章目录list底层的简单实现list_node的实现！list_node的构造函数list的迭代器！——重点！list迭代器的成员变量迭代器的构造函数* 重载前置重载后置重载前置-- 重载后置-- 重载! 重载重载-- 重载list的const迭代器——…...

编程日记 2023/4/12 17:18:09

学习Linux只要学会这个命令就够了！

大家好，我是良许。这段时间又是搬家，又是找新办公室，现在终于安顿下来了，有时间给大家分享干货了。今天给大家介绍一个 Linux 超级实用命令，有了这个命令，你就可以愉快使用 Linux 上几乎所有常用命令了…...

编程日记 2023/3/22 19:37:37

javascript基础

javascript基础 1概述： JavaScript是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行JavaScript代码。诞生于1995年，当时的主要目的是验证表单的数据是否合法。 JavaS…...

编程日记 2023/3/22 19:32:36

【游戏逆向】某游戏技能库分析

技能库的分析大多是从技能名字入手的，然后再通过传入职业或者ID等信息去到库中去取当前角色的可用技能。下面我们来对《**明月刀》中的技能库进行分析。首先通过CE对技能名字进行搜索，得到较少的结果，分别对结果进行修改，并再次…...

编程日记 2023/3/22 19:27:34

Resnet:model_urls {‘resnet18’: ‘https://download.pytorch.org/models/resnet18-5c106cde.pth‘,‘resnet34’: ‘https://download.pytorch.org/models/resnet34-333f7ec4.pth‘,‘resnet50’: ‘https://download.pytorch.org/models/resnet50-19c8e357.pth‘,‘resnet…...

编程日记 2023/3/22 19:22:31

毕业设计基于51单片机自动智能浇花系统设计

基于51单片机自动智能浇花系统设计1、毕业设计选题原则说明（重点）2、项目资料2.1 系统框架2.2 系统功能3、部分电路设计3.1 STC89C52单片机最小系统电路设计3.2 按键电路设计3.3 水泵控制电路设计4、部分代码展示4.1 数码管位选程序4.2 ad0832数据读取程…...

编程日记 2023/4/12 17:19:59

熟悉常用的 Linux 操作和 Hadoop 操作

文章目录前言一、常用命令集合1、cd命令：切换目录1、切换到目录/usr/local2、切换回上级目录3、切换到当前登录Linux系统的用户的自己的文件夹2、ls命令：查看文件与目录3、mkdir命令：创建目录4、rmdir命令：删除空的目录5、cp 命令…...

编程日记 2023/3/22 19:12:25

Vue2项目总结-电商后台管理系统

Vue2项目总结-电商后台管理系统去年做的项目，拖了很久，总算是打起精力去做这个项目的总结，并对Vue2的相关知识进行回顾与复习各个功能模块如果有过多重复冗杂的部分，将会抽取部分值得记录复习的地方进行记录一：项目…...

编程日记 2023/3/22 19:07:23

【二】一起算法---队列：STL queue、手写循环队列、双端队列和单调队列、优先队列

纸上得来终觉浅，绝知此事要躬行。大家好！我是霜淮子，欢迎订阅我的专栏《算法系列》。学习经典算法和经典代码，建立算法思维；大量编码让代码成为我们大脑的一部分。 ⭐️已更系列 1、基础数据结构 1.1、链表➡传送门 1…...

编程日记 2023/4/13 5:07:24

＜Linux＞环境变量

环境变量文章目录环境变量一、基本概念二、常见环境变量三、查看环境变量的方法四、测试PATH五、测试HOME六、测试SHELL七、环境变量相关的命令八、环境变量的组织方式九、命令行参数十、通过代码获得环境变量十一、通过系统调用获取环境变量十二、环境变量通常是具有全局属性…...

编程日记 2023/3/22 18:57:18

【MySQL】下载（超详细教程）

目录 First-下载 Second-安装 Third-检测是否安装 Last-总结 First-下载首先 ，我们一步一步跟着我的操作来，不能越步骤，很容易报错，就芭比Q了。第一步直接进入这个网址：MySQL ：： MySQL 社…...

编程日记 2023/3/22 18:52:16

再探pytorch的Dataset和DataLoader

本文从分类、检测、分割三大任务的角度来剖析pytorch得dataset和dataloader源码，可以让初学者深刻理解每个参数的由来和使用，并轻松自定义dataset。思考：在探究Dataset和DataLoader之前，需要明白一个事情，就是当我们不…...

编程日记 2023/3/22 18:47:14

【2023.3.18 美团校招】

文章目录1. 小美剪彩带2. 最多修改两个字符，生成字典序最小的回文串1. 小美剪彩带题意：找出区间内不超过k种数字子数组的最大长度使用双指针的方式，用哈希表来统计每个数出现次数。在双指针移动的过程中，动态的维护区间内不同数…...

编程日记 2023/3/22 18:42:12

程序员必须知道的HTML常用代码有哪些？

HTML 即超文本标记语言，是目前应用最为广泛的语言之一，是组成一个网页的主要语言。在现今这个 HTML5 华丽丽地占领了整个互联网的时候，如果想要通过网页抓住浏览者的眼球光靠因循守旧是不行的，程序猿们需要掌握一些必须知道的 HTM…...

编程日记 2023/3/22 18:37:11

多目标家庭行为检测--人脸识别模块构建

文章目录前言原理项目结构编码配置主控函数人脸采集模块特征提取识别测试前言 2023-3-18 天小雨，午觉舒适程度5颗星。任务完成指数2颗星。续接上文：《MidiaPipe stgcn（时空图卷积网络）实现人体姿态判断（单目标&#x…...

编程日记 2023/3/22 18:32:09

RocketMQ重复消费问题的原因

文章目录概览消息发送异常时重复发送消费消息抛出异常消费者提交offset失败服务端持久化offset失败主从同步offset失败重平衡清理长时间消费的消息总结概览消息发送异常时重复发送首先，我们来瞅瞅RocketMQ发送消息和消费消息的基本原理。如图，简单说一下上图中的概念： …...

编程日记 2023/3/22 18:27:06

proxy详细介绍与使用

proxy详细介绍与使用 proxy 对象用于创建一个对象的代理，是在目标对象之前架设一个拦截，外界对该对象的访问，都必须先通过这个拦截。通过这种机制，就可以对外界的访问进行过滤和改写。 ES6 原生提供 Proxy 构造函数，…...

编程日记 2023/3/22 18:22:04

7天玩转Open-LLM-VTuber：从零基础到打造专属AI虚拟主播

7天玩转Open-LLM-VTuber：从零基础到打造专属AI虚拟主播【免费下载链接】Open-LLM-VTuber Talk to LLM by voice with Live2D that runs offline on multiple platforms. An attempt to build AI VTuber neuro-sama. 项目地址: https://gitcode.com/gh_mirrors/op…...

编程新知 2026/3/30 22:01:33

400字节的前端奇迹：TinyEditor如何重新定义微型代码编辑体验

400字节的前端奇迹：TinyEditor如何重新定义微型代码编辑体验【免费下载链接】TinyEditor A functional HTML/CSS/JS editor in less than 400 bytes 项目地址: https://gitcode.com/gh_mirrors/ti/TinyEditor 在前端开发的世界里，我们常常被功能…...

编程新知 2026/3/30 20:46:45

COMSOL 物质传递建模仿真：氯气洗涤与液膜除氯的奇妙之旅

COMSOL物质传递建模仿真 comsol物质传递反应氯气洗涤，液膜除氯液膜交界面氯气浓度衰减在化工领域，物质传递与反应的模拟对于优化工艺、提高效率至关重要。今天咱就唠唠基于 COMSOL 的物质传递建模仿真，特别是围绕氯气洗涤以及液膜除氯这俩关…...

编程新知 2026/3/30 19:50:12

西电B测：基于SystemView的2PSK调制解调全流程仿真解析

1. 2PSK通信系统仿真入门指南第一次接触SystemView做2PSK仿真时，我也被满屏的波形和参数搞得头晕。后来发现只要抓住几个关键点，这个实验其实比想象中简单得多。2PSK（二进制相移键控）是数字通信中最基础的调制方式之一&#xff…...

编程新知 2026/3/30 17:20:00

跨平台开源工具OptiScaler：释放显卡潜能的性能优化指南

跨平台开源工具OptiScaler：释放显卡潜能的性能优化指南【免费下载链接】OptiScaler DLSS replacement for AMD/Intel/Nvidia cards with multiple upscalers (XeSS/FSR2/DLSS) 项目地址: https://gitcode.com/GitHub_Trending/op/OptiScaler 你是否曾因显卡…...

编程新知 2026/3/30 16:43:25

OWL ADVENTURE应用场景解析：如何用AI助手提升工作效率

OWL ADVENTURE应用场景解析：如何用AI助手提升工作效率 1. 为什么选择OWL ADVENTURE作为AI助手在当今快节奏的工作环境中，我们每天都要处理大量视觉信息——从产品图片到数据图表，从设计稿到文档扫描件。传统的工作流程往往需要人工逐一查看…...

编程新知 2026/3/30 16:17:12

低成本部署实践：通义千问1.5-1.8B-Chat-GPTQ-Int4在Ubuntu 20.04上的完整教程

低成本部署实践：通义千问1.5-1.8B-Chat-GPTQ-Int4在Ubuntu 20.04上的完整教程最近有不少朋友在问，有没有那种对硬件要求不高，但又能跑起来体验一下大模型对话的轻量级方案？毕竟不是人人都有高端显卡。正好，我最近在星…...

编程新知 2026/3/30 13:47:09

Magika：AI驱动的文件类型检测神器，准确率高达99%+

Magika：AI驱动的文件类型检测神器，准确率高达99% 【免费下载链接】magika 项目地址: https://gitcode.com/GitHub_Trending/ma/magika 你是否曾经遇到过这样的情况：下载了一个文件却不知道它是什么格式？或者在处理大量文件…...

编程新知 2026/3/30 13:31:01

Sketchfab 3D模型本地化工具：Firefox浏览器专业解决方案

Sketchfab 3D模型本地化工具：Firefox浏览器专业解决方案【免费下载链接】sketchfab sketchfab download userscipt for Tampermonkey by firefox only 项目地址: https://gitcode.com/gh_mirrors/sk/sketchfab 在数字创作领域，3D资源的离线获取与…...

编程新知 2026/3/30 12:56:22

MediaPipeUnityPlugin技术解构与实战指南：Unity AI视觉开发进阶之路

MediaPipeUnityPlugin技术解构与实战指南：Unity AI视觉开发进阶之路【免费下载链接】MediaPipeUnityPlugin Unity plugin to run MediaPipe 项目地址: https://gitcode.com/gh_mirrors/me/MediaPipeUnityPlugin 问题发现：Unity AI视觉开发的现实…...

编程新知 2026/3/30 12:40:15

CSS 实现六边形柱状图

什么是推挽输出，开漏输出？

【图像分割】Unet系列深度讲解（FCN、UNET、UNET++）

list底层的简单实现（万字长文详解！）

学习Linux只要学会这个命令就够了！

javascript基础

【游戏逆向】某游戏技能库分析

Pytorch深度学习常用预训练网络模型的下载地址

毕业设计基于51单片机自动智能浇花系统设计

熟悉常用的 Linux 操作和 Hadoop 操作

Vue2项目总结-电商后台管理系统

【二】一起算法---队列：STL queue、手写循环队列、双端队列和单调队列、优先队列

＜Linux＞环境变量

【MySQL】下载（超详细教程）

再探pytorch的Dataset和DataLoader

【2023.3.18 美团校招】

程序员必须知道的HTML常用代码有哪些？

多目标家庭行为检测--人脸识别模块构建

RocketMQ重复消费问题的原因

proxy详细介绍与使用

7天玩转Open-LLM-VTuber：从零基础到打造专属AI虚拟主播

400字节的前端奇迹：TinyEditor如何重新定义微型代码编辑体验

COMSOL 物质传递建模仿真：氯气洗涤与液膜除氯的奇妙之旅

西电B测：基于SystemView的2PSK调制解调全流程仿真解析

跨平台开源工具OptiScaler：释放显卡潜能的性能优化指南

OWL ADVENTURE应用场景解析：如何用AI助手提升工作效率

低成本部署实践：通义千问1.5-1.8B-Chat-GPTQ-Int4在Ubuntu 20.04上的完整教程

Magika：AI驱动的文件类型检测神器，准确率高达99%+

Sketchfab 3D模型本地化工具：Firefox浏览器专业解决方案

MediaPipeUnityPlugin技术解构与实战指南：Unity AI视觉开发进阶之路

CSS 实现六边形柱状图

前言

1.实现效果

2.实现步骤

3.实现代码

4.写在最后🍒

看完本文如果觉得对你有一丢丢帮助，记得点赞+关注+收藏鸭 🍕

更多相关内容，关注🍥苏苏的bug，🍡苏苏的github，🍪苏苏的码云~

相关文章：