CSSの線形勾配で破線の対角線を作成します

Question

div内に斜線の斜線が必要です。私が示すように、それはxのうち行の1を削除し、私の葉の上の行をコメントアウトすることによって、このコード

.crossed { 

background: 
    linear-gradient(to top left, 
     rgba(0,0,0,0) 0%, 
     rgba(0,0,0,0) calc(50% - 0.8px), 
     /*rgba(0,0,0,1) 50%,*/ 
     rgba(0,0,0,0) calc(50% + 0.8px), 
     rgba(0,0,0,0) 100%), 
    linear-gradient(to top right, 
     rgba(0,0,0,0) 0%, 
     rgba(0,0,0,0) calc(50% - 0.8px), 
     rgba(0,0,0,1) 50%, 
     rgba(0,0,0,0) calc(50% + 0.8px), 
     rgba(0,0,0,0) 100%); 
} 

と交差を作る方法が見出さdraw diagonal lines in div background with CSS

このトレッドで

必要に応じて対角線で置き換えます。

しかし、どうすれば線を破線にすることができますか？

フィドルはここにある：fiddle

感謝！

編集： 申し訳ありません、申し訳ありません、サンプルコードで100px幅を見て、divは幅と高さをjsで変更しています。これは斜めの度合いを変えるので、transform：rotate（-45deg）;あなたはあなたができる、コード内でSVGあなたにしたくない場合はhttps://jsfiddle.net/u25q9uq4/1/

：文句を言わない

Answer 1

あなたはここで、破線の背景

<div class='box'> 
    <svg style='width: 100%; height: 100%;'> 
     <line stroke-dasharray="5, 5" x1="0" y1="100%" x2="100%" y2="0" style="stroke:rgb(255,0,0);stroke-width:2"/> 
    </svg> 
    <div> 
    your content here over the svg 
    </div> 
</div> 

デモのためにSVGを使用するための簡単なオプションは次のようになり仕事まだ

div.box{ 
    position: relative; 
    width: 211px; 
    height: 55px; 
    border: 1px solid black; 
    background: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxsaW5lIHN0cm9rZS1kYXNoYXJyYXk9IjUsIDUiICB4MT0iMCIgeTE9IjEwMCUiIHgyPSIxMDAlIiB5Mj0iMCIgc3R5bGU9InN0cm9rZTpyZ2IoMjU1LDAsMCk7c3Ryb2tlLXdpZHRoOjIiLz48L3N2Zz4=") no-repeat center center; 
background-size: cover; 
} 

デモここでは、BASE64でCSSの背景としてそれを使用する：https://jsfiddle.net/u25q9uq4/2/

私はbase64で

にSVGを変換するthis toolを使用。これは、SVGの最終形態であるあなたはそれを変換、この例では、破線のリンクの色やストロークを変更することができ

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%"><line stroke-dasharray="5, 5" x1="0" y1="100%" x2="100%" y2="0" style="stroke:rgb(255,0,0);stroke-width:2"/></svg> 

を変換し、それをあなたのCSSに挿入してください。

幸運のベスト。

編集：Examples of svg dashed lines