React.js component to create a hexagon with CSS (or SASS): So... pure CSS hexagons with box-shadow, border, and background image.

dynamic-hexagon-component-styles.sass

// This 

// Use this for math.div(number, divider) function
@use "sass:math"

// The sqrt function, just to calc sqrt(3) ._.
// Source: https://www.antimath.info/css/sass-sqrt-function/
@function sqrt($r)
    $x0: 1
    $x1: $x0
    
    @for $i from 1 through 10
        $x1: $x0 - math.div(($x0 * $x0 - abs($r)), (2 * $x0))
        $x0: $x1
    
    @return $x1

$hexagon-color: #ddb70e
$hexagon-height: 50 // This value will be the rectangle height into the hexagon
// The width is the rectangle width
$hexagon-width: 2 * math.div(sqrt(3)*$hexagon-height, 2) // Triangle height formule * 2
$hexagon-height-middle: math.div($hexagon-height, 2)
$hexagon-width-middle: math.div($hexagon-width, 2)

// Source: http://brenna.github.io/csshexagon/ (it does not have TLS)
.Hexagon
    position: relative
    width: #{$hexagon-width}px
    height: #{$hexagon-height}px
    background-color: $hexagon-color
    margin: #{$hexagon-height-middle}px 0

    // Now, we add two triangle to previous rectangle to form a hexagon
    &:before, &:after
        content: ""
        position: absolute
        width: 0
        border-left: #{$hexagon-width-middle}px solid transparent
        border-right: #{$hexagon-width-middle}px solid transparent
    
    &:before
        bottom: 100%
        border-bottom: #{$hexagon-height-middle}px solid $hexagon-color

    &:after
        top: 100%
        width: 0
        border-top: #{$hexagon-height-middle}px solid $hexagon-color

// The concept to create this hexagon like cool. There are a lot of methods to do that,
// some ones use three rectangles, two has rotation.

dynamic-hexagon-component.tsx

import './dynamic-hexagon-component-styles.sass';

export interface HexagonProps {};

export function Hexagon(props: HexagonProps) {
  return (
    <div className="Hexagon"></div>
  );
}