1px wide element looks thicker than a border of 1px width

Issue

I created a box and gave it a border that is 1px wide. I wanted to add a line that goes across it from the top left corner to the bottom right corner, so I used a pseudo element and gave it a height of 1px and a width that is large enough to make it span the entire the box at a 45 angle. The problem is that the line turned out to be much thicker than the border, even though they have the same dimension of 1px.

.box {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  position: relative;
  overflow: hidden;
}

.box::before {
  content: '';
  display: block;
  width: 141.4213562px;
  height: 1px;
  background-color: black;
  position: absolute;
  top: 0;
  left: 0;
  transform: rotate(45deg);
  transform-origin: 0 0;
}

<div class="box"></div>

Solution

It only looks thicker due to the pixelation from being diagonal. In the snippet, hover the first box you will see the lines rotate and appear as thick as the border.

In the second box I have come up with a bit of a workaround. The width of the diagonal lines is halved (0.5) of the default. And then using box shadow, I add back a quarter (0.25) to each side of the box using spread, and then a little anti-alias hack by using blur. This is fix:
height: calc(var(--borderThickness) * .5 );
box-shadow: 0 0 .075px calc(var(--borderThickness) * .25 ) currentColor;

On 100% zoom, this will make the line appear a little thinner. On higher zooms it will basically match the width because the '0.075px' box-shadow blur becomes negligible

:root { --borderThickness: 1px }

.boxes { display: flex; gap: 1rem; justify-content: center }

.box {
  border: var(--borderThickness) solid currentColor;
  display: grid;
  height: 100px; width: 100px;
  overflow: hidden;
  place-items: center;
  position: relative;
}

.box::before, .box::after {
  background-color: currentColor;
  content: '';
  grid-area: 1/1/-1/-1;
  height: var(--borderThickness); width: 141.4%;
  transform: rotate(var(--rotate));
  transition: transform 120ms ease-in-out;
}

.box::before { --rotate: 45deg } .box:hover::before { --rotate: 90deg }
.box::after { --rotate: -45deg } .box:hover::after { --rotate: 0deg }

.box.fix::before, .box.fix::after {
  height: calc(var(--borderThickness) * .5 );
  box-shadow: 0 0 .075px calc(var(--borderThickness) * .25 ) currentColor; /* Thicken line and anti alias */
}

<div class="boxes">
  <div class="box"></div>
  <div class="box fix"></div>
</div>

Answered By - Simp4Code