Creating a design with three parallel bars in CSS

Question

Creating a design with three parallel bars in CSS

For my webpage, I wanted to add an extended flag at the top by creating three horizontal stripes:

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>

I'm struggling with getting the flag to stick right up to the edge of the browser without any gaps on the sides or top. Is there a better or easier way to achieve this? Please keep in mind that I am still learning and consider myself a novice in web design.

Your help would be greatly appreciated! Thank you

html css lines

Answer 1

Answer №1

Get rid of all margin and padding on both the html and body elements, then apply a single div with a background created from a linear-gradient

See an example here: 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%);
}

Answer 2

Get rid of all margin and padding on both the html and body elements, then apply a single div with a background created from a linear-gradient

See an example here: 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%);
}

Creating a design with three parallel bars in CSS

Answer №1

Similar questions

Prevent keyboard interactions on HTML5 videos in Firefox by implementing JavaScript restrictions

Seeking a way to keep the returned Ajax string consistent and prevent it from fading away after page transition

Issues with padding and margin on iOS devices

Looking for assistance in minimizing the gap between the banner and content on my Weebly website

Is there a way to use CSS to generate a disappearing triangle-shaped div that will only vanish when clicked directly on the triangle and not when clicked on the surrounding overflow area?

Modify table row background color using PHP based on its position in the table with the use of a function

`the mobile site is not displaying properly on the screen`

What methods are available to load sections of a complex SVG shape asynchronously?

The measurement of a HTML window's entire content height (not just the visible viewport height)

Adjust item size and move them into the panel

Dividing a string into an array and displaying it in a table using Laravel

Preventing background image repetition in Internet Explorer

How can I improve the smoothness of my CSS transition when resizing background images?

Utilizing a jQuery variable within an .html() method

Convert a solo row into individual columns within a grid format

Issue with Bootstrap navigation bar not displaying on iPad devices

Secret icon revealing on mouseover

"Utilize CSS GRID without the need for ::before and ::after in grid layouts

Tips for optimizing Slider Code to showcase an expanded selection of slides

How to turn off spin buttons for input type=“number” in AngularJS when using webkit