CSS/SCSS Hexagon with rounded corners, transparent and has inset shadow

Question

I have been trying to replicate this design using HTML and CSS/SCSS in Angular. It can be found here : https://www.behance.net/gallery/139462547/NFT-Landing-Page-Website-Redesign-Concept?tracking_source=search_projects%7Ccryptocurrency%20landing%20page

Here is the sample code of what I achieved so far (Typescript, SCSS, HTML):

import { Component, Input, OnInit } from '@angular/core';
import { IStory } from './story';

@Component({
  selector: 'fh-roadmap',
  templateUrl: './roadmap.component.html',
  styleUrls: ['./roadmap.component.scss'],
})
export class RoadmapComponent implements OnInit {
  @Input() stories: IStory[];

  constructor() {
    this.stories = [
      {
        title: 'The Mint',
        text: '10,000 Genesis City Blocks Available To Mint On The Ethereum Blockchain.',
        status: 'done',
      },
      {
        title: 'The Blackout Mint',
        text: 'Blackout Blocks Are Available To Mint On The Ethereum Blockchain For The Price Of 25,000 $MET.',
        status: 'upcoming',
      },
    ];
  }

  ngOnInit(): void {}
}

/* Variables */
$unit: 0px;
$hexagon-width: 300;
$hexagon-opacity: 1;
$hexagon-color: rgb(102, 204, 102, $hexagon-opacity);
$hexagon-border-radius: 5;
$hexagons-space: 1em;
$title-color: white;
$text-color: grey;

$status-done: green;
$status-upcoming: yellow;

/* Calculated (Do not edit) */
$hexagon-height: calc($hexagon-width / math.sqrt(3)) +
  ($hexagon-border-radius - $hexagon-border-radius/6);
$inner-triangle-height: math.sqrt(
  math.pow($hexagon-height, 2) - math.pow($hexagon-width/2, 2)
);

.timeline {
  background-color: rgb(1, 22, 107);
}

.horizontal {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

li::marker {
  color: white;
}

/* Hexagon */
.hexagon {
  position: relative;
  background-color: inherit;
  border-radius: $hexagon-border-radius + $unit;
  width: $hexagon-width + $unit;
  height: $hexagon-height + $unit;
  box-sizing: border-box;
  margin-top: $inner-triangle-height + $unit;
  margin-bottom: $inner-triangle-height + $unit;

  box-shadow: inset 10px 0px 40px rgba(255, 255, 255, 0.25),
    inset -10px 0px 40px rgba(255, 255, 255, 0.25);

  &::before,
  &::after {
    content: "";
    position: absolute;
    border: inherit;
    background-color: inherit;
    border-radius: inherit;
    height: 100%;
    width: 100%;
    z-index: 0;
    box-shadow: inherit;
  }

  &::before {
    transform: rotate(60deg);
  }

  &::after {
    transform: rotate(-60deg);
  }

  > .content {
    position: absolute;
    width: inherit;
    height: inherit;
  }
}

/* Text */
.title {
  color: white;
  margin-bottom: 2em;
}

.text {
  color: grey;
}

.status {
  .done {
    color: $status-done;
  }
  .upcoming {
    color: $status-upcoming;
  }
}

/* MISC */
.center {
  text-align: center;
}

.abs-bottom {
  position: absolute;
  bottom: 0;
  width: inherit;
}

<div class="timeline">
  <ol class="container horizontal">
    <ng-container *ngFor="let story of stories; let i = index">
      <li class="hexagon" [ngClass]="(i + 1) % 2 == 0 ? 'even' : 'odd'">
        <div class="content">
          <div class="title center">{{ story.title }}</div>
          <div class="text center">{{ story.text }}</div>
          <div class="status center abs-bottom">
            <span [ngClass]="story.status">{{ story.status | uppercase }}</span>
          </div>
        </div>
      </li>
    </ng-container>
  </ol>
</div>

So far, I managed to : 1- Make the hexagon shape 2- Have rounded corners 3- Position the content

My current objective is to have an inset shadow in the hexagon while it's transparent but I am unable to. Can you guys help ?

Here is an image showing the hexagon : Hexagon

Answer 1

I remotely remember having to make hexagons using css and seeing recommendations of using three triangles like what you're doing. I'd suggest looking into using clip-path to create the hexagon shapes. If you google it there are likely a bunch of gists or other resources.