两种颜色的水平线

我想模拟HTML页面图片上的相同效果。是否有可能在不使用图像或JS的情况下完成此操作？我知道它可以通过添加边框颜色顶部和底部来水平完成，但我无法找到一种方法来实现它的水平。两种颜色的水平线

2014-10-31 Tan Kucukhas

这是一段时间，因为我已经做了HTML，但我可能会使用框架。不知道如果人们仍然这样做，但... – 2014-10-31 21:41:31

你能给我们一些你正在使用的代码吗？我相信它可以用css来完成。 – Wavemaster 2014-10-31 21:49:10

您可以为您的元素添加一个灰色border-bottom，并用红色::after伪元素部分重叠：

h1 { 
 
    border-bottom: 2px solid #E5E5E5; 
 
} 
 
h1:after { 
 
    content: ''; 
 
    display: block; 
 
    border-bottom: 2px solid #EC1C24; 
 
    margin-bottom: -2px; 
 
    max-width: 200px; 
 
}

<h1>Haberler</h1>

来源

2014-10-31 21:52:27 Oriol

完美工作，谢谢。 – 2014-10-31 21:56:33

您可以结合带边框的几个内联块元素，但我不知道这是否是值得的（而不是使用的图像）：

div { 
 
    width: 120px; 
 
    height: 80px; 
 
    border-bottom: red 2px solid; 
 
    border-top: blue 2px solid; 
 
    display: inline-block; 
 
    } 
 

 
#a { 
 
    width: 240px; 
 
    border-top: green 2px solid; 
 
    border-bottom: gray 2px solid 
 
    }

<div></div><div id="a"></div>

来源

2014-10-31 21:51:03 Shomz

.line { 
 
    background:gray; 
 
    position:relative; 
 
    height:2px; 
 
} 
 
.line:before { 
 
    content:''; 
 
    background:red; 
 
    width:30%; 
 
    height:2px; 
 
    position:absolute;  
 
}

<div class="line">

来源

2016-11-25 09:41:55

hr { 
 
    margin: 0; 
 
    width: 100%; 
 
    height: 5px; 
 
    background-color: red; 
 
    border: 0; 
 
} 
 

 
hr:after { 
 
    content: ''; 
 
    display: block; 
 
    border-bottom: 5px solid green; 
 
    max-width: 50%; 
 
}

<hr/>

来源

2017-02-20 10:03:43

两种颜色的水平线

回答

相关问题