CSSの破線の枠線をどのように傾斜させるのですか？

Question

メールアプリケーション用のCSSを使用して封筒をデザインしようとしています。私のクライアントは、このように破線の境界線

がどのように私はCSSの境界線とその効果を得ることができます望んでいますか？

Answer 1

少し色をつけて遊ぶ必要があるかもしれません。

.enveloppe { 
 
\t padding: 1em; 
 
\t border: 16px solid transparent; 
 
\t border-image: 16 repeating-linear-gradient(45deg, red 0, red 1em, transparent 0, transparent 2em, 
 
\t    #b67 0, #b67 3em, transparent 0, transparent 4em); 
 
\t 
 
\t 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>