html : 画一条分隔线到三个答案

【问题标题】：html : Draw a separated line to threehtml : 画一条分隔线到三个
【发布时间】：2021-08-11 10:06:08
【问题描述】：

您好，我想在我的 html 页面中绘制一条分成 3 行的行。和图片一样。

【问题讨论】：

【解决方案1】：

你可以使用linear-gradient:

.hr {
  width:100%;
  height:4px;
  background-image: linear-gradient(to right,
                    lightseagreen 0, lightseagreen calc(33.3% - 4px),
                    transparent calc(33.3% - 4px), transparent calc(33.3% + 4px),
                    lightseagreen calc(33.3% + 4px), lightseagreen calc(66.6% - 4px),
                    transparent calc(66.6% - 4px),  transparent calc(66.6% + 4px),
                    lightgray calc(66.6% + 4px), lightgray 100%)
}

&lt;div class="hr"&gt;&lt;/div&gt;

或弹性布局：

.hr {
  display: flex;
  width: 100%;
  height: 4px;
  justify-content: space-between;
}

.hr>span {
  width: 32.6%;
  background-color: lightgray; 
}

.hr>span.filled {
  background-color: lightseagreen;
}

<div class="hr">
  <span class="filled"></span>
  <span class="filled"></span>
  <span></span>
</div>

【讨论】：