Rendering Problem in BOTH Chrome & Firefox with CSS Transform-CodePudding

Although sometimes a pixel here or there must be forgiven and forgotten.
But in this example this simple menu's need to be rendered pixel-perfectly!
That is to say, the gaps between the menu items must be exactly equal.
In my example all menu separators looks ugly and fuzzy and disoriented as some items melt together.
While others are too far apart. Its a mess. After a nights sleeping,
I have come to the conclusion that this is one of those scenario's where the life's motto
of accepting whatever comes at you cannot be accepted and a designer must take a stand.

Whether its a dashed or solid line, the problem occurs in each and every whay I approach it.
setting margins to -1px and adding a border of 1px does not fix this.
Both examples are made from the newest version of Chrome and Firefox in 2022.

Is there a way we can separate the items with an equal, exact pixelated/aliased sharp line, without the vague anti-aliased fuzzy line of seemingly random thickness to happen?

You are allowed to rewrite it entirely or use flexbox or any other elegant CSS solution!

..............................

nav ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
nav {
    top: 0px;
    left: 0px;
    position: absolute;
    height: auto;
    display: inline-block;
    font-style: italic;
    font-size: 1.25em;
    padding: 0px 0 0 0;
}
nav li {
    background-color: blue;
    writing-mode: vertical-rl;
    transform: scale(-1);
    line-height: 1em;
    border-top: 1px dashed white;
}
nav li a {
    display:block;
    text-decoration: none;
    color: #fff;
    padding: 2em;
}

<nav>
  <ul>
    <li><a href="#">Bureau</a></li>
    <li><a href="#">Projecten</a></li>
    <li><a href="#">Diensten</a></li>
    <li><a href="#">Ontwerpen</a></li>
    <li><a href="#">Concepten</a></li>
    <li><a href="#">Kunsten</a></li>
  </ul>
</nav>

CodePudding user response：

Borders can be fiddly when you start applying transforms to the element they are applied to, so remove the transform:scale(-1) from the containing <li> elements and transform the <a> instead:

nav li {
    background-color: blue;
    writing-mode: vertical-rl;
    line-height: 1em;
    border-top: 1px dashed white;
}
nav li a {
    display:block;
    text-decoration: none;
    color: #fff;
    padding: 2em;
    transform:rotate(180deg); <- other transforms are available :)
}

Snippet here based on your code: https://codepen.io/29b6/pen/KKQZywz