css - 将 CSS 生成的三 Angular 形拆分为 2 个水平不同的相同颜色

Question

正如您应该能够通过此 fiddle 上的代码看到的那样以及下面，我希望能够将第二个 div 顶部显示的 CSS 生成的三 Angular 形水平均匀分割为橙色和绿色 使用的颜色。目前它仅以一种形式显示(橙色)。

我不知道该怎么做。

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

两个伪元素直 Angular 三 Angular 形怎么样？

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/