html - 如何为 CSS 形状添加边缘高亮？

Question

您好，我正在尝试在 CSS 形状上创建高亮显示，如下所示。

六边形内部还会有内容，包括图片和文字，我指的亮点是左上角的部分。

我目前用于创建六边形的代码是:

HTML

<div class="hexagon-big"></div>

CSS

.hexagon-big {
    position: relative;
    
    width: 200px; 
    height: 115.47px;
    background-color: #343434;
   
    
    
}

.hexagon-big:before,
.hexagon-big:after {
    content: "";
    position: absolute;
    width: 0;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
}

.hexagon-big:before {
    bottom: 100%;
    border-bottom: 57.74px solid #343434;   
}

.hexagon-big:after {
    top: 100%;
    width: 0;
    border-top: 57.74px solid #343434;
}

内容还有其他代码，但我把它遗漏了，因为我认为没有必要

Answer 1

以不同的方式制作六边形，您可以依靠渐变来创建高光效果:

.hex {
  width: 200px;
  display: inline-flex;
  margin:0 5px;
  background:
    conic-gradient(at top,#000 230deg, #0000 0),
    linear-gradient(to bottom left,#fff , #000 60%);
  clip-path: polygon(0% 25%,0% 75%,50% 100%,100% 75%,100% 25%,50% 0%);
}

.hex::before {
  content: "";
  padding-top: 115%; /* 100%/cos(30)  */
}

<div class="hex"></div>