网站建设教程视频教程,网站开发好吗,婚纱网站html模板,找图片素材网站前言
#x1f44f;CSS 实现六边形柱状图 速速来Get吧~
#x1f947;文末分享源代码。记得点赞关注收藏#xff01;
1.实现效果 2.实现步骤
定义全局css变量#xff0c;柱状宽度为–w#xff0c;最大高度为–h#xff0c;柱形整体为渐变色#xff0c;定义上部分颜色为…前言
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 classbarspan/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-pathclip-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 classbar span/span
/divbox-shadowCSS 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
bodysectiondiv classbar style--height: 5%; --w: 25pxspan/span/divdiv classbar style--height: 60%span/span/divdiv classbar style--height: 30%; --w: 50pxspan/span/divdiv classbar style--height: 60%; --w: 60pxspan/span/divdiv classbar style--height: 30%; --w: 30pxspan/span/divdiv classbar style--height: 80%; --w: 35pxspan/span/divdiv classbar style--height: 10%; --w: 45pxspan/span/div/section
/body4.写在最后
看完本文如果觉得对你有一丢丢帮助记得点赞关注收藏鸭
更多相关内容关注苏苏的bug苏苏的github苏苏的码云~
