CSS 2颜色角度背景,动态宽度,固定高度?

时间:2014-07-25 23:56:16

标签: css css3 linear-gradients

我正在尝试从右上角到左下角的分割背景,动态宽度......我的第一个想法是使用渐变和颜色停止来分割容器背景,但这样,我的目标是让渐变创建的线从一个角落到另一个角落,具有动态容器宽度和固定高度。我创建了2个小提琴示例,如何将2种颜色创建的线条从右上角到左下角并将对角线切成两半?

以下是从一个角到另一个角的示例,但宽度是固定的,容器必须是方形的:http://jsfiddle.net/KnLmv/

.split {
    height:300px;
    width:300px;
    color:#383634;
    background-image: -webkit-gradient(linear, left top,right bottom,color-stop(0%, rgb(74,12,107)), color-stop(100%, rgb(102,153,102)));
    background: -moz-linear-gradient(left top, #4a0c6b 0%, #4a0c6b 50%, #669966 50%, #669966 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#4a0c6b), color-stop(100%,#669966)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left top, #4a0c6b 0%, #4a0c6b 50%, #669966 50%, #669966 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left top, #4a0c6b 0%, #4a0c6b 50%, #669966 50%, #669966 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(left top, #4a0c6b 0%, #4a0c6b 50%, #669966 50%, #669966 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4a0c6b', endColorstr='#669966',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(lef top, #4a0c6b 0%, #4a0c6b 50%, #669966 50%, #669966 100%); /* W3C */
}

这是相同的示例,但动态容器宽度为:http://jsfiddle.net/Lgc57/

.split {
    height:300px;
    width:100%;
    color:#383634;
    background-image: -webkit-gradient(linear, left top,right bottom,color-stop(0%, rgb(74,12,107)), color-stop(100%, rgb(102,153,102)));
    background: -moz-linear-gradient(left top, #4a0c6b 0%, #4a0c6b 50%, #669966 50%, #669966 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#4a0c6b), color-stop(100%,#669966)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left top, #4a0c6b 0%, #4a0c6b 50%, #669966 50%, #669966 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left top, #4a0c6b 0%, #4a0c6b 50%, #669966 50%, #669966 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(left top, #4a0c6b 0%, #4a0c6b 50%, #669966 50%, #669966 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4a0c6b', endColorstr='#669966',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(lef top, #4a0c6b 0%, #4a0c6b 50%, #669966 50%, #669966 100%); /* W3C */
}

如何调整此值,以便第二个示例分隔线像第一个示例一样转角?

0 个答案:

没有答案