Reverse repeating linear gradient

I'm using this piece of code to create a somewhat dotted border:

CSS

.strip {
    height: 5px;
    width: 80px;
    background: repeating-linear-gradient(90deg, transparent, transparent 10px, #ffaacd 5px, #ffaacd 30px);
}

I'm trying to reverse the colors by switching transparent and #ffaacd and their corresponding lengths but it doesn't work. I would get a straight pink line.

Note

Please note that I cannot use border because it affects some layout so I'd rather just use the background.

Edit

I've created a Fiddle to illustrate what I'm trying to achieve.

Basically I'm doing some form of legend and right now the strip is starting with a transparent color but I want it to start with the pink color so that it is aligned with the strip above it.

Your length offsets are a little strange. If you want hard stops, you should have the both the #ffaacd and the transparent sections have a color stop at 10px.

It works if you change it to:

background: repeating-linear-gradient(90deg, transparent, transparent 20px, #ffaacd 20px, #ffaacd 30px);

This gives you a transparent section for 20px and then a #ffaacd section for 10px. This is the opposite of the original.

See this JSFiddle for a working example.