將一個CSS生成的三角形分成兩個水平不同的相同顏色

Question

正如你應該能夠看到這個fiddle以及下面的代碼一樣，我希望能夠將顯示在頂部的CSS生成的三角形分開第二格水平相等之間橙色和綠色使用的顏色。現在它只能在一個（橙色）中顯示。

我不知道如何去做這件事。

HTML：

<div class="top"> 
    <div class="triangle-down"></div> 
</div> 
<div class="bottom"></div> 

CSS：

.top 
{ 
    background: -moz-linear-gradient(left, #FDC57B 0%, #FDC57B 50%, #85D782 50%, #85D782 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#FDC57B), color-stop(50%,#FDC57B), color-stop(50%,#85D782), color-stop(100%,#85D782)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(left, #FDC57B 0%,#FDC57B 50%,#85D782 50%,#85D782 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(left, #FDC57B 0%,#FDC57B 50%,#85D782 50%,#85D782 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(left, #FDC57B 0%,#FDC57B 50%,#85D782 50%,#85D782 100%); /* IE10+ */ 
    background: linear-gradient(to right, #FDC57B 0%,#FDC57B 50%,#85D782 50%,#85D782 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FDC57B', endColorstr='#85D782',GradientType=1); /* IE6-9 */ 
    height: 100px; 
    position: relative; 
} 

.bottom 
{ 
    background: pink; 
    height: 100px; 
} 
.triangle-down{ 
    width: 3%; 
    height: 0; 
    padding-left:3%; 
    padding-top: 2%; 
    overflow: hidden; 
    position: absolute; 
    left:0;right:0; 
    margin:auto; 
    top: 100px; 
    z-index:1; 
} 
.triangle-down:before { 
    content: ''; 
    display: block; 
    width: 0; 
    height: 0; 
    margin-left:-50px; 
    margin-top:-33px; 

    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
    border-top: 33px solid #FDC57B; 
} 

Answer 1

如何約兩僞元素直角三角形？

HTML：

<div class="triangle"></div> 

CSS：

/* this container is used to position the left and right 
pseudo-element triangles */ 

.triangle { 
position: absolute; 
width: 40px; 
height: 40px; 
left: 50%; 
top: 100px; 
margin-left: -20px; 
} 
.triangle:before { 
content: " "; 
position: absolute; 
left: 50%; 
top: 0px; 
margin-left: -20px; 
width: 0px; 
height: 0px; 
border-style: solid; 
border-width: 0 20px 20px 0; 
border-color: transparent #FDC57B transparent transparent; 
} 
.triangle:after { 
content: " "; 
position: absolute; 
left: 50%; 
top: 0px; 
width: 0px; 
height: 0px; 
border-style: solid; 
border-width: 20px 20px 0 0; 
border-color: #85D782 transparent transparent transparent; 
} 

的jsfiddle：http://jsfiddle.net/vNRHv/18/