How to slant dashed border in CSS?

Question

I am trying to design an envelope using CSS for a Mail App. My client wants dashed borders in this manner

How can I achieve that effect with CSS borders?

Answer 1

You may have to play with the colors a little.

.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

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>