如何在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> 

Answer 2

如果要更改位置，请删除容器类的边距。

 *:before, *:after { box-sizing: border-box; } html, body { overflow: hidden; padding: 0; margin: 0; } .container { width: 300px; height: 200px; margin:0 auto; background-image: repeating-linear-gradient(135deg, #F29B91 0px, #F09290 30px, transparent 30px, transparent 50px, #83B3DB 50px, #84ADCB 80px, transparent 80px, transparent 100px); padding: 12px; } .container .inner { background: white; width: 100%; height: 100%; } 

 <div class="container"> <div class="inner">envelope design</div> </div>