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