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

Question

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

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

- Sai Datta

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>

- Gerard

Answer 2

If you want to change the position remove the margin of container class.

*: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>

- Avagana