想要在html中创建一条带有三种颜色的水平线吗

伙计们，我想用三种不同的颜色创建一条水平线。例如，前30%的线为灰色，其他30%的线为红色，最后40%的线为黑色。有没有可能用这些颜色在html中创建一条水平线。提前谢谢。

有了答案，用三种不同的颜色创建了三条不同的线，每一条线的百分比分别为30%、30%和40%。然后将其显示为一行。

这是一个带有单个HTML元素的CSS解决方案

HTML:

---

您可以使用渐变：

background: -moz-linear-gradient(left, #adadad 0%, #adadad 30%, #36d321 30%, #36d321 60%, #ff0202 60%, #ff0202 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#adadad), color-stop(30%,#adadad), color-stop(30%,#36d321), color-stop(60%,#36d321), color-stop(60%,#ff0202), color-stop(100%,#ff0202));
background: -webkit-linear-gradient(left, #adadad 0%,#adadad 30%,#36d321 30%,#36d321 60%,#ff0202 60%,#ff0202 100%);
background: -o-linear-gradient(left, #adadad 0%,#adadad 30%,#36d321 30%,#36d321 60%,#ff0202 60%,#ff0202 100%);
background: -ms-linear-gradient(left, #adadad 0%,#adadad 30%,#36d321 30%,#36d321 60%,#ff0202 60%,#ff0202 100%);
background: linear-gradient(to right, #adadad 0%,#adadad 30%,#36d321 30%,#36d321 60%,#ff0202 60%,#ff0202 100%);

---

您也可以尝试以下代码：

<style>
    .line
    {
        height:1px;
        width:100%;
        display:table;
    }
    .line .gray
    {
        background:gray;
        width:30%;
        height:100%;
        display:table-cell;
    }
    .line .red
    {
        background:red;
        width:30%;
        height:100%;
        display:table-cell;
    }
    .line .black
    {
        background:black;
        width:40%;
        height:100%;
        display:table-cell;
    }
</style>

<div class="line">
    <div class="gray"></div>
    <div class="red"></div>
    <div class="black"></div>
</div>

.线路
{
高度：1px；
宽度：100%；
显示：表格；
}
.线.灰色
{
背景：灰色；
宽度：30%；
身高：100%；
显示：表格单元格；
}
.线，红色
{
背景：红色；
宽度：30%；
身高：100%；
显示：表格单元格；
}
.线，黑色
{
背景：黑色；
宽度：40%；
身高：100%；
显示：表格单元格；
}

在一个分区内对齐3个分区，如下所示：

<div id="parent" style="float:left">
  <div stle="float:left; background:yellow; width:30%" />
  <div stle="float:left; background:orange; width:30%" />
  <div stle="float:left; background:grey; width:60%" />
</div>

我已经为你的问题想出了一个可能的解决方案。它只是一个

div

，其中包含其他

div

s，它们都有自己的颜色和宽度。您可以通过更改CSS轻松定制它。我希望这有帮助，祝你好运

HTML:

---

是的，这是可能的，你有这样做的逻辑，自己试试；）正是这样，很高兴你得到了：）@webtiki我宁愿使用

top:0；底部：0

要拉伸绝对定位伪元素的高度：@HashemQolami好主意。您还可以使用

top:0；身高：100%的course@HashemQolami是，或
高度：100%
，以简化线厚定制@万维网蒂奇倒霉！我已经编辑了我的答案，使用高度：100%。我决定让其余部分保持不变，因为我认为不必在头脑中合并CSS块，一眼就能看出它是如何工作的，但在现实生活中，是的，我同意你的简化。从某种程度上说，这可能是“正确的答案”——没有伪元素，纯粹是线条颜色的样式。对于笨拙的语法和对供应商前缀的需求感到遗憾，这当然不是你的错：）我也喜欢这个解决方案。正如CupawnTae所说，供应商前缀使解决方案看起来有点凌乱，但任何css预处理器（如SASS或更少）都可以快速、整洁地完成这项工作。谢谢，这对我有很大的帮助。有了这些前缀很好，但也请在您的答案中包含实际代码-答案应该独立，没有外部链接。
<style>
    .line
    {
        height:1px;
        width:100%;
        display:table;
    }
    .line .gray
    {
        background:gray;
        width:30%;
        height:100%;
        display:table-cell;
    }
    .line .red
    {
        background:red;
        width:30%;
        height:100%;
        display:table-cell;
    }
    .line .black
    {
        background:black;
        width:40%;
        height:100%;
        display:table-cell;
    }
</style>

<div class="line">
    <div class="gray"></div>
    <div class="red"></div>
    <div class="black"></div>
</div>

<div id="parent" style="float:left">
  <div stle="float:left; background:yellow; width:30%" />
  <div stle="float:left; background:orange; width:30%" />
  <div stle="float:left; background:grey; width:60%" />
</div>

<div id="line">
    <div id="gray"></div>
    <div id="red"></div>
    <div id="black"></div>
</div>

div#line {
    height: 1px;
    width: 100%;
}

div#line > div {
    height: 100%;
    float: left;
}

div#gray {
    width: 30%;
    background-color: gray;
}

div#red {
    width: 30%;
    background-color: red;
}

div#black {
    width: 40%;
    background-color: black;
}