<div id="tie-angle">
  <div class="there-is-no-try-angle" anchor="tie-angle"></div>
  <div class="there-is-no-try-angle" anchor="tie-angle"></div>
  <div class="there-is-no-try-angle" anchor="tie-angle"></div>
  <div class="there-is-no-try-angle" anchor="tie-angle"></div>
  <div class="there-is-no-try-angle" anchor="tie-angle"></div>
  <div class="there-is-no-try-angle" anchor="tie-angle"></div>
  <div class="centergon" anchor="tie-angle"></div>
</div>

#tie-angle {
  
  /* Hexagon */
  corner-shape: bevel;
  border-radius: 25% / 50%;
  
  /* Fix width */
  aspect-ratio: 1;
  
  /* Make responsive */
  height: calc(100vh - 16px);
  
  /* Everything else */
  background: #111;
  border: 6px solid #aaa;
  box-sizing: border-box;

  .there-is-no-try-angle {
    
    /* Triangle */
    corner-shape: bevel;
    border-radius: 50% / 100% 100% 0 0;
    
    /* Sizing */
    width: calc(anchor-size(width) / 2);
    height: calc(anchor-size(height) / 2);
    
    /* Everything else */
    position: fixed;
    border: 3px solid #aaa;
    border-left-width: 4.5px;
    border-right-width: 4.5px;
    box-sizing: border-box;

    /* V-flip even triangles */
    &:nth-of-type(even) {
      rotate: 180deg;
    }

    &:nth-child(1) {
      top: anchor(top);
      left: anchor(left);
    }

    &:nth-child(2) {
      top: anchor(top);
      justify-self: anchor-center;
    }

    &:nth-child(3) {
      top: anchor(top);
      right: anchor(right);
    }

    &:nth-child(4) {
      bottom: anchor(bottom);
      left: anchor(left);
    }

    &:nth-child(5) {
      bottom: anchor(bottom);
      justify-self: anchor-center;
    }

    &:nth-child(6) {
      bottom: anchor(bottom);
      right: anchor(right);
    }
  }

  .centergon {
    
    /* Hexagon */
    corner-shape: bevel;
    border-radius: 25% / 50%;
    
    /* Fix width */
    aspect-ratio: 1;
    
    /* Position in center */
    position: fixed;
    position-area: center;
    
    /* Everything else */
    height: 25%;
    background: #aaa;
    
  }
}