방법/CSS에서이 작업을 수행 할 수 있습니까?

Question

이 배너에서 봐 :

http://schart.net/newbanas.png

내가 CSS를 사용하여이 stripish 패턴을 만들 수 있습니까? 이 컨테이너를 어떤 너비로 바꾸기를 원하므로 CSS 여야합니다.

포트폴리오를 만들고 있는데이 배경 스타일로 섹션을 정렬하고 싶습니다.

Answer 1

내가 좋아 : http://davidwalsh.name/css-triangles

실제로 뒤에 마법에 대해 배우고 싶은 경우는, 레아 베루 그녀의 블로그에 좋은 글이 있습니다 경사 예리 블록 요소 방법은 여기 좋은 튜토리얼에서 제시 개념 꽤 많은, 그래서 나는 기본적으로 중복 :

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/

. Firefox와 호환되어야하지만 그렇지 않습니다.

Answer 2

가능합니다. http://jsfiddle.net/pratik136/VYRe2/

이 상당히 교차입니다 :

가장 쉬운/빠른 방법은 예를 들어 http://colorzilla.com/gradient-editor

같은 발전기를 사용 할 수 있습니다, 여기에 샘플의 바이올린이 생성기를 사용하여 만든입니다 브라우저뿐!

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의 위치 사용하고 있습니다. 이것은 자신의 세트의 보너스와 베인과 함께 제공됩니다. 따라서 당신이 선택하는 대상은 목적에 따라 다릅니다! http://lea.verou.me/2010/12/checkered-stripes-other-background-patterns-with-css3-gradients/