Is it possible to change the color of a border every 75px?

I'd like to put a border with 3 alternating colors with a height of 75px on both the left side and right side of my website. The left side was easy - there were many divs each with a height of 75px. I simply used the CSS nth-of-type selector to alternate the border colors. The right side of my website, however, is a div of unknown width and height that contains the content of my website. How can I achieve the same effect if I'm unable to use the nth-of-type selector?

Here's a section of the border of my left hand page:

I'd prefer not to use images. CSS3 is fine as long as it gracefully degrades if the user's browser isn't up to spec.

Answers


you may use a repeating-linear-gradient with background-size or an image to fake that border.

 div {
   height:300px;
   background:repeating-linear-gradient(to bottom,#0194BE 0, #0194BE 75px, orange 75px, orange 150px, #E2D397 150px, #E2D397 225px) repeat-y;
   background-size:2px 225px;
 }

http://codepen.io/anon/pen/yDqrb

Else look for the use of border-image http://www.w3.org/TR/css3-background/#border-images.

if you use multiple background, you can draw all borders and even do the fake columns


Need Your Help

Facebook Authentication: To use this URL you must add a valid native platform in your App's settings

ios facebook cordova

Have a Cordova iOS app with Facebook authentication using Facebook Cordova Plugin.https://github.com/Wizcorp/phonegap-facebook-plugin