Three Horizontal Stripes in CSS

Three horizontal stripes in CSS

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

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

Where do I get a 3 horizontal lines symbol for my webpage?

All the ways provided in the link in comment are great. but there is also a way not described there, the same as bootstrap is using too. The preference of this method is because it is pure CSS animatable.

<div class="menu-icon">
    <span class="line"></span>
    <span class="line"></span>
    <span class="line"></span>
</div>

.menu-icon > .line {
    background-color: #292929;
    height: 2px;
    display: block;
}
.menu-icon > .line + .line {
    margin-top: 8px;
}

Split div-box background in three horizontal lines

Try this - I'm sure there's a simpler way, but this gives you the output you want - 3 equal height stripes, vertically centered text and text overlapping the stripes:

#footer {

  position: relative;

  height: 99px;

  background: transparent;

  color: #282828;

  margin-bottom: 5em;

  text-align: center;

  font-size: 64px;

}

#footer p {

  position: relative;

  top: 50%;

  transform: translateY(-50%);

}

#footer .copyright {

  display: inline-block;

  padding-top: 0.60em;

  letter-spacing: 0.05em;

  color: #999;

  color: rgba(255, 255, 255, 0.5);

}

#background {

  position: absolute;

  height: 100%;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  z-index: -1;

}

#top,

#middle,

#bottom {

  height: 33.3334%;

}

#top {

  background: #ff9f65;

}

#middle {

  background: #b5b5b5;

}

#bottom {

  background: #82c051;

}

<div id="footer">

  <div id="background">

    <div id="top"></div>

    <div id="middle"></div>

    <div id="bottom"></div>

  </div>

  <p>This is my Text here</p>

</div>

Three line menu? Navicon? Drawer? Menu Icon? Side Swipe? Three stripes? Hamburger?

Earliest reference has the name as Menu Button as created by Norm Cox and Xerox circa 1990...

http://vimeo.com/61556918

http://gizmodo.com/who-designed-the-iconic-hamburger-icon-1555438787

Pattern with three stripes

I've added a second line to your pattern. Also I've removed the attributes with a value == 0. If your stroke-width is 10 (for example) you will need to begin your line at 5 since a line is drawn 5 units to one side and 5 to the other side. I hope it helps.

<svg width="300" height="300" viewBox="0 0 200 200">

    <pattern id="diagonalHatch" width="30" height="10" 

     patternTransform="rotate(130)" patternUnits="userSpaceOnUse">

         <rect width="100%" height="100%" fill="orange"></rect>

         <line x1="5" x2="5" y2="10" style="stroke:blue; stroke-width:10" />

         <line x1="15" x2="15" y2="10" style="stroke:red; stroke-width:10" />

    </pattern>

    <rect x="0" y="0" width="100%" height="100%" fill="url(#diagonalHatch)"/>

</svg>

Create Repeating Horizontal and Vertical dashed line using CSS

You can generally create this pattern by nesting two repeating linear gradients. See Stripes in CSS for making stripes with gradients.

You make one gradient from left to right, then another one from top to bottom, and the end result is a grid as in your image.

div {

  background-color: seagreen;

  width: 500px;

  height: 500px;

  position: relative;

}

div::after {

  content: '';

  width: 100%;

  height: 100%;

  position: absolute;

  top: 0;

  left: 0;

  z-index: 1;

  background: repeating-linear-gradient(to right, transparent, transparent 98px, white 100px, white 100px), repeating-linear-gradient(to bottom, transparent, transparent 98px, white 100px, white 100px);

<div></div>

Body background with 3 background colors

Linear Gradient Approach

You can make use of linear-gradient background images like in the below snippet. Making the color stop point of one color as the starting point of the next color would produce a block like effect instead of an actual gradient like effect.

Linear gradients are supported in the recent versions of all browsers. If you want to support IE9 and lower then you may have to look at some libraries (like CSS3 PIE) or use a different approach like box-shadow (inset) or some extra (or pseudo) elements.

Horizontal Stripes:

To create horizontal stripes, an angle (or sides) need not be specified because the default angle is 0 degree (or to bottom like mentioned in jedrzejchalubek's answer).

body {

  height: 100vh;

  width: 100vw;

  background-image: linear-gradient(red 33.33%, white 33.33%, white 66.66%, blue 66.66%);

  background-size: 100% 100%;

  background-repeat: no-repeat;

  margin: 0px;

}

<!-- to avoid browser prefixes -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

How to remove the stripes that appears when using linear gradient property

You are facing a complex background propagation that you can read about here. I will try to explain it with simple words.

Your body has a height equal to 0; thus the background won't be visible on it but by default it has 8px of margin which create a height of 8px on the html element.

---

Why not 16px of height (8px for top + 8px for bottom)?

Since the height of body is 0 we are facing a margin collpasing and both margin will collapse into only one and we have a height of 8px.

---

Then we have a background propagation from body to html and the linear-gradient will cover the 8px height.

Finally, the background of the html is propagated to the canvas element in order to cover the whole area which explain why the linear gradient is repeating each 8px.

body {

  background: linear-gradient(to top, red, yellow);

}

---

Related Topics