CSS中的三横条纹

Question

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

CSS

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

超文本标记语言

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

如何让它紧贴浏览器边缘？（如左侧、右侧或顶部没有间隙）

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

非常感谢您的帮助！谢谢

Answer 1

删除和元素中的任何margin和，然后使用带有 a的单个元素作为背景paddinghtmlbodydivlinear-gradient

示例： 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%);
}