如何/我可以在CSS中做到這一點？

Question

看看這面旗幟：

http://schart.net/newbanas.png

我可以使用CSS這stripish模式？我希望這個改變容器的寬度，所以它應該是CSS。

我正在做一個投資組合，我想用這種風格的背景來理清部分。

Answer 1

我喜歡的傾斜邊塊元方法，在一個很好的教程這裏提出概念相當多，所以我基本上覆制了：

的CSS是有點複雜，但我基本上使用的:before和:after僞元素，創造出三角形：

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

演示：http://jsfiddle.net/Nq35k/19/

它只能在WebKit瀏覽器。它應該與Firefox一起工作，但事實並非如此。

Answer 2

是的，你可以。

最簡單/最快捷的方法，可以使用像http://colorzilla.com/gradient-editor

例如發電機，這裏是一個樣本小提琴使用該發生器產生：http://jsfiddle.net/pratik136/VYRe2/

這是相當交叉瀏覽器以及！

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

另一種方法是使用了精確定位div s的傾斜邊界。這與它自己的一套恩賜和詛咒有關，所以你選擇哪一個取決於目的！ http://davidwalsh.name/css-triangles

如果你真的想了解它背後的魔力，利·貝羅在她的博客的好文章：http://lea.verou.me/2010/12/checkered-stripes-other-background-patterns-with-css3-gradients/