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