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