How to add an edge highlight to a CSS shape?

user_11981185 0
Viewed 178

Hi I am trying to create a highlight on a CSS shape as shown below. enter image description here

There will also be content inside of the hexagon including image and text, The highlight I am referring to is the part in the top left.

the code I currently have for creating the hexagon is:

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;
}

There is other code for the content but i left it out because I don't think it is necessary

css html
2 Answers

Do the hexagon shape differently and you can rely on gradient to create that highlight effect:

.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>

user_86203330

The solution in this answer is heavily based on the previous answer. To use clip-path and stacked gradients is by far the smartest thing to do here, but I still wanted to post this in order to show, how this solution could be improved and adjusted for your use case (text box, coloring, variables for maintenance, etc.).

.hexagon-big {
  /* define box and text space */
  width: 200px;
  height: 230px;
  padding: 10.8% 5px; /* adjust text box padding here; mind that top/bottom tip are part of the box */
  box-sizing: border-box; /* width/height should include padding */
  /* text formatting (optional) */
  color: white;
  text-align: center;
  /* hex shape */
  --hex-col: hsl(0deg 0% 20%); /* just your #343434 as a HSL color */
  --hex-shadow: hsl(0deg 0% 50%); /* increased lightness by 15% to define highlight root color; 100% would be fully white */
  background:
    conic-gradient(at top, var(--hex-col) 232deg, transparent 0), /* change the angle of the shadow at "232deg": increase → narrower, decrease → wider */
    linear-gradient(to bottom left, var(--hex-shadow), var(--hex-col) 55%);
  clip-path: polygon(0% 25%,0% 75%,50% 100%,100% 75%,100% 25%,50% 0%);
}
<div class="hexagon-big">
  Lorem ipsum dolor sit amet...
</div>

It should also be mentioned that your current way of using border is well better supported by older browsers than clip-path and conic-gradient (same with var()).
If this should be a problem, you might have to add another HTML tag and work out a way with transform: matrix(...) and box-shadow: inset ... (for example).

user_76381190
Related