css、htmlを使って多くの対角線[右ハッシュライン]を描くにはどうすればよいですか？

Question

最初にcss、htmlを使用して四角形内に多くの斜線を描くにはどうすればよいですか？ 矩形の先頭に斜線を描きたい。私はコードの下に使用して矩形を表示することができ

：

<div className={moneybarsection.bar1} /> 

.bar { 
    width: 100%; 
    height: 25px; 
    } 

    .bar1 { 
    @extend .bar; 
    background: #24891D; 
    border-left: 150px solid #6FD967; 
    } 

Answer 1

.bar { 
    width: 200px; 
    height: 25px; 
    background: #6FD967; 
    border-right: 150px solid green; 
    background: repeating-linear-gradient(
     -45deg, 
     transparent, 
     transparent 4px, 
     transparent 1px, 
     green 7px 
    ), 
     linear-gradient(
     to bottom, 
     transparent, 
     transparent 
    ) 
    } 

ワーキングフィドル：https://jsfiddle.net/mamata/q3ef8b7d/

Answer 2

.bar { 
    height: 100px; 
    width: 5px; 
    background: black; 
    transform: rotate(45deg); 
} 

ワーキングフィドル：https://jsfiddle.net/b38zkr53/

あなたは対角線を作成することができます変換を使用。

Answer 3

.triangle,.triangle1 { 
 
    height: 100px; 
 
    width: 5px; 
 
    background: black; 
 
    transform: rotate(45deg); 
 
    margin-left: 200px; 
 
    display:inline-block; 
 
} 
 
.triangle1{ transform: rotate(137deg);margin-left:62px;} 
 
.triangle2{border-bottom:5px solid #000;width:20px;margin-left:200px;height:5px;}

<div class="triangle"></div><div class="triangle1"></div> 
 
<div class="triangle2">