3
正如你应该能够看到这个fiddle以及下面的代码一样,我希望能够将显示在顶部的CSS生成的三角形分开第二格水平相等之间橙色和绿色使用的颜色。现在它只能在一个(橙色)中显示。将一个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;
}
嗨,我有一点问题,得到它的工作我有它的问题的方式。也许你知道? – fakeguybrushthreepwood
好的,你遇到了什么问题? – Marcatectura
我一直在坚持将上面发布的示例与您的示例进行合并。我只是看不出2是如何结合的。 – fakeguybrushthreepwood