CSS中的三个横条纹 [英] Three horizontal stripes in CSS

问题描述

我创建了三个横条纹，以创建将在页面顶部运行的扩展标记：

I've created three horizontal stripes to create an extended flag that will run at the top of my page:

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>

直到浏览器的边缘？
（如左右或顶部没有间隙）

How to get it to stick right up to the edge of the browser? (as in no gaps on the left right or top)

还有任何更简单/更好的方式我可以做到
Keep请记住我非常新手

And also is there any easier / better way I could have done this Keep in mind I'm very much a novice

您的帮助非常感谢！
感谢

Your help is much appreciated! Thanks

推荐答案

删除任何保证金和 padding 从 html 和 body 元素，然后使用单个 div 以线性渐变为背景

Remove any margin and padding from html and body elements, then use a single div with a linear-gradient as a background

a href =http://codepen.io/anon/pen/rOxEgJ =nofollow> http://codepen.io/anon/pen/rOxEgJ

Example: 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中的三个横条纹的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！