Comment/puis-je faire cela en CSS?

Question

Jetez un oeil à cette bannière:

http://schart.net/newbanas.png

Puis-je faire ce modèle de stripish en utilisant CSS? Je veux que cela change la largeur du conteneur, donc ce devrait être CSS.

Je fais un portfolio et je veux trier des sections avec ce style de fond.

Answer 1

J'aime la notion tout à fait beaucoup, donc je essentiellement dupliqué:

Le CSS est un peu compliqué, mais je essentiellement utilisé les éléments pseudo-:before et :after pour créer des 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); 
} 

Démo: http://jsfiddle.net/Nq35k/19/

Il ne fonctionne que dans les navigateurs WebKit. Cela devrait fonctionner avec Firefox, mais ce n'est pas le cas.

Answer 2

Oui, vous pouvez.

Le moyen le plus/plus rapide peut être utiliser un générateur comme http://colorzilla.com/gradient-editor

Par exemple, voici un violon pour un échantillon créé en utilisant ce générateur: http://jsfiddle.net/pratik136/VYRe2/

C'est assez croisée navigateur aussi bien!

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 */ 
} 

Une autre façon de le faire est en utilisant précisément positionné div s avec des bordures inclinées. Cela vient avec son propre ensemble de faveurs et d'interdictions, de sorte que celui que vous choisissez dépend à peu près sur le but! La méthode des éléments bloc incliné tranchant est présenté dans un bon tutoriel ici: http://davidwalsh.name/css-triangles

Si vous voulez vraiment en savoir plus sur la magie derrière elle, Lea Verou a un bon article sur son blog: http://lea.verou.me/2010/12/checkered-stripes-other-background-patterns-with-css3-gradients/