如何为CSS绘制的六边形形状添加左上角边缘高光效果

解决方案 #

这里推荐两种实现方式，你可以根据需求选择：

方案1：使用clip-path重构六边形（更推荐，代码精简易维护）

直接用clip-path属性裁剪出六边形形状，不需要用伪元素拼接上下三角，叠加线性渐变即可实现左上角高光，内部可正常放置图片、文本等内容：

.hexagon-big {
    position: relative;
    width: 200px; 
    /* 正六边形总高度 = 宽度 * √3 ≈ 200 * 1.1547 */
    height: 230.94px;
    /* 裁剪六边形形状 */
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    /* 叠加高光渐变：135度对应左上角到右下角的走向，半透明白色做高光，可自行调整透明度和结束位置修改高光效果 */
    background: linear-gradient(135deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 35%), #343434;
    /* 内部内容排版可按需自定义，不影响高光效果 */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

HTML部分无需修改，直接在容器内添加你需要的图片、文本内容即可。

方案2：不改动原有边框拼接逻辑

如果你不想修改原有的六边形实现，可新增一个高光层叠加在上方：

1. HTML部分新增高光标签：

<div class="hexagon-big">
  <span class="hex-highlight"></span>
  <!-- 原有内部内容 -->
</div>

2. 新增对应CSS：

.hexagon-big {
  /* 保留原有所有样式 */
  z-index: 1;
}
/* 高光层样式 */
.hex-highlight {
  position: absolute;
  z-index: 2;
  top: -57.74px;
  left: 0;
  width: 100%;
  /* 覆盖整个六边形高度 */
  height: calc(100% + 115.48px);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: linear-gradient(135deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 35%);
  /* 避免高光遮挡内部内容，可按需调整pointer-events */
  pointer-events: none;
}
/* 内部内容需要设置更高层级避免被高光遮挡 */
.hexagon-big > *:not(.hex-highlight) {
  position: relative;
  z-index: 3;
}

两种方案的高光效果都可以通过调整linear-gradient的透明度、渐变结束位置来适配你想要的视觉效果。

内容的提问来源于stack exchange，提问作者hbblue