CSS 中的三个水平条纹

Question

我创建了三个水平条纹来创建一个扩展标志，它将运行在我的页面顶部：

CSS

#main1 div{
width: auto;
height: 20px;
margin: 0px

HTML

<div id="main1">
<div style="background-color:red;"></div>
<div style="background-color:blue;"></div>
<div style="background-color:orange;"></div>

如何让它贴在浏览器的边缘？（因为在左右或顶部没有间隙）

还有什么更简单/更好的方法可以做到这一点请记住，我是一个新手

非常感谢您的帮助！谢谢

Answer 1

从 html 和 body 元素中删除任何 margin 和 padding，然后使用带有 linear-gradient 的单个 div 作为背景

示例：http://codepen.io/anon/pen/rOxEgJ

html, body { margin: 0; padding: 0 }


#flag {
   height : 100px;
   width  : 100%;
   background: linear-gradient(to bottom, 
       red    0%, red  33.33%, 
       blue   0%, blue 66.66%,        
       orange 0%);
}

CSS 中的三个水平条纹

Three horizontal stripes in CSS

html

css

lines