如何用CSS将列表元素设置为六边形？附示例代码

嘿，针对你这个轮播图库用的极小六边形需求，我整理了两个最直接的实现思路，尤其是你觉得棘手的空心样式，其实用纯CSS或者简单SVG就能搞定，而且完全适配小尺寸：

一、实心极小六边形：用CSS Clip-path快速实现 #

这个方案应该是最省心的，现代浏览器兼容性拉满，代码也极简，刚好适配你要的小尺寸（比如10px级别的）：

.hex-solid {
  width: 10px;
  height: 11.5px; /* 六边形高≈宽×1.1547，小尺寸下近似11.5px足够精准 */
  background-color: #000; /* 实心颜色 */
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

原理就是用clip-path的多边形裁剪，直接把矩形切成六边形，小尺寸下视觉上完全没有偏差，调整宽高和颜色就能直接用。

二、空心极小六边形：两种简洁方案 #

方案1：嵌套伪元素（纯CSS，无需额外资源） #

这个思路是用两个六边形叠加，外层作为边框，内层用背景色（和轮播背景一致）挖空，完美模拟空心效果，适配极小尺寸：

.hex-hollow {
  position: relative;
  width: 10px;
  height: 11.5px;
}
/* 外层：边框颜色 */
.hex-hollow::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: #fff; /* 替换成你需要的边框颜色 */
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
/* 内层：挖空部分，用父容器背景色填充 */
.hex-hollow::after {
  content: '';
  position: absolute;
  inset: 1px; /* 这里的数值就是边框宽度，小尺寸设1px刚好 */
  background-color: #你的轮播背景色; /* 比如轮播背景是黑色就设#000 */
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

这个方案的好处是纯CSS实现，不需要引入外部资源，调整inset数值就能改边框粗细，完全适配极小尺寸的需求。

方案2：SVG背景（无需担心背景色适配） #

如果你的轮播背景是渐变或者透明的，用SVG背景会更灵活，而且极小尺寸下不会模糊：

.hex-hollow-svg {
  width: 10px;
  height: 11.5px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 23'%3E%3Cpolygon points='10 0 20 5.75 20 17.25 10 23 0 17.25 0 5.75' fill='none' stroke='%23fff' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

你可以直接修改SVG里的stroke（边框颜色）和stroke-width（边框宽度），fill='none'保证是空心状态，data URI形式的SVG不需要额外文件，直接写在CSS里就行。

总结 #

对于你这种轮播指示器的极小六边形需求，优先推荐：

• 实心用clip-path方案，最快最省心
• 空心用嵌套伪元素方案（纯CSS，无需考虑资源），如果背景复杂就选SVG方案

内容的提问来源于stack exchange，提问作者Zbyszek Kisły