如何倾斜 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

如果要更改位置，请移除容器的边距 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>

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

How to slant dashed border in CSS?

html

css

css-shapes