如何在CSS中倾斜虚线边框？

Question

我正在尝试使用CSS为邮件应用程序设计信封.我的客户希望以这种方式填充虚线边框

如何使用CSS边框实现该效果？

Answer 1

你可能需要稍微玩一下颜色.

.enveloppe {
	padding: 1em;
	border: 16px solid transparent;
	border-image: 16 repeating-linear-gradient(45deg, red 0, red 1em, transparent 0, transparent 2em,
	              #b67 0, #b67 3em, transparent 0, transparent 4em);
	
	max-width: 20em;
}

<div class="enveloppe">Lorem Ipsum</div>