Создание формы пятиугольника CSS

Question

Я пытаюсь создать форму пятиугольника в CSS, но между средними вершинами имеется разрыв шириной в 1 пиксель:

.shape-pentagon {
  position: relative;
  width: 5.4rem;
  box-sizing: content-box;
  border-width: 5.0rem 1.8rem 0rem;
  border-style: solid;
  border-color: $primary transparent;
  &::before {
    content: "";
    position: absolute;
    height: 0;
    width: 0;
    top: -8.5rem;
    left: -1.8rem;
    border-width: 0rem 4.5rem 3.5rem;
    border-style: solid;
    border-color: transparent transparent $primary;
  }
}

Я не могу подтолкнуть атрибуты настолько, чтобы это исправить.У кого-нибудь есть более красивый пятиугольник или исправление, которым можно поделиться?