css - How / Can I do this in CSS?

Question

Take a look at this banner:

http://schart.net/newbanas.png

Can I make this stripish pattern using CSS? I want this to change whatever width the container is, so it should be CSS.

I'm making a portfolio and I want to sort out sections with this style of background.

Answer 1

Yes you can.

The easiest/quickest way can be using a generator like http://colorzilla.com/gradient-editor

For instance, here's a fiddle for a sample created using this generator: http://jsfiddle.net/pratik136/VYRe2/

This is fairly cross-browser as well!

HTML

<!--[if gte IE 9]>
  <style type="text/css">
    .gradient {
       filter: none;
    }
  </style>
<![endif]-->

<div class="stripey gradient">TEST GRADIENT</div>​

CSS

.stripey{
    background: #ff7577; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZmY3NTc3IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMzQlIiBzdG9wLWNvbG9yPSIjZmY3NTc3IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMzQlIiBzdG9wLWNvbG9yPSIjMjA3Y2NhIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMzQlIiBzdG9wLWNvbG9yPSIjMjk4OWQ4IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNjklIiBzdG9wLWNvbG9yPSIjMjk4OWQ4IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNjklIiBzdG9wLWNvbG9yPSIjN2RiOWU4IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNjklIiBzdG9wLWNvbG9yPSIjZWFlY2ZmIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2VhZWNmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
    background: -moz-linear-gradient(-45deg,  #ff7577 0%, #ff7577 34%, #207cca 34%, #2989d8 34%, #2989d8 69%, #7db9e8 69%, #eaecff 69%, #eaecff 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#ff7577), color-stop(34%,#ff7577), color-stop(34%,#207cca), color-stop(34%,#2989d8), color-stop(69%,#2989d8), color-stop(69%,#7db9e8), color-stop(69%,#eaecff), color-stop(100%,#eaecff)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(-45deg,  #ff7577 0%,#ff7577 34%,#207cca 34%,#2989d8 34%,#2989d8 69%,#7db9e8 69%,#eaecff 69%,#eaecff 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-45deg,  #ff7577 0%,#ff7577 34%,#207cca 34%,#2989d8 34%,#2989d8 69%,#7db9e8 69%,#eaecff 69%,#eaecff 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(-45deg,  #ff7577 0%,#ff7577 34%,#207cca 34%,#2989d8 34%,#2989d8 69%,#7db9e8 69%,#eaecff 69%,#eaecff 100%); /* IE10+ */
    background: linear-gradient(135deg,  #ff7577 0%,#ff7577 34%,#207cca 34%,#2989d8 34%,#2989d8 69%,#7db9e8 69%,#eaecff 69%,#eaecff 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff7577', endColorstr='#eaecff',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
}

Another way to do it is using precisely positioned divs with slanted borders. This comes with it's own set of boons and banes, so which one you pick depends pretty much on the purpose! The slanted-edged block element method is presented in a good tutorial here: http://davidwalsh.name/css-triangles

If you actually want to learn about the magic behind it, Lea Verou has a good article on her blog: http://lea.verou.me/2010/12/checkered-stripes-other-background-patterns-with-css3-gradients/

Answer 2

I like the concept quite a lot, so I basically duplicated it:

The CSS is somewhat complicated, but I basically used the :before and :after pseudo-elements to create triangles:

body {
    background: #EEEEEE;
}

.stripe {
    display: inline-block;
    position: relative;

    font-family: 'Source Sans Pro', sans-serif;
    font-size: 72px;

    height: 130px;
    line-height: 130px;

    -webkit-transition: 0.2s all;
    -moz-transition: 0.2s all;

    cursor: pointer;
}

.red {
    color: white;
    background: #CD3333;
    border-color: #CD3333;
}

.red:hover {
    background: #d24747;
    border-color: #d24747;
}

.blue {
    color: white;
    background: #6495CA;
    border-color: #6495CA;
}

.blue:hover {
    background: #77a2d0;
    border-color: #77a2d0;
}

.stripe:after, .stripe:not(:first-child):before {
    content: '';
    display: block;
    position:absolute;

    top: 0;
    right: -50px;
    bottom: auto;
    left: auto;

    border-style: solid;
    border-width: 0 0 130px 50px;
    border-color: transparent inherit;
}

.stripe:not(:first-child) {
    margin-left: 45px;
}

.stripe:first-child {
    padding-left: 10px;
}

.stripe:not(:first-child):before {
    left: -50px;
    right: auto;

    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
}

Demo: http://jsfiddle.net/Nq35k/19/

It only works in WebKit browsers. It should work with Firefox, but it doesn't.