html - 反向重复线性梯度

我正在使用这段代码创建一个有点虚线的边框：
CSS

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

我试图通过切换transparent和#ffaacd以及它们相应的长度来反转颜色，但这不起作用。我会得到一条粉红色的直线。
注意
请注意，我不能使用border，因为它会影响某些布局，所以我宁愿使用背景。
编辑
我创建了一个Fiddle来说明我正在努力实现的目标。
基本上我是在做一些形式的传奇，现在开始的地带是一个透明的颜色，但我希望它开始与粉红色，以便它是与上面的地带对齐。

最佳答案

你的长度偏移有点奇怪。如果你想要硬停止，你应该让#ffaacd和transparent部分都有一个颜色停止在10px。
如果将其更改为：

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

这给你一个20px的transparent部分，然后10px的#ffaacd部分。这与原著相反。
有关工作示例，请参见this JSFiddle。