如何使用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">