使用线性渐变

时间：2016-12-06 17:04:30

标签： css css3 linear-gradients

我花了很多时间尝试提出一个解决方案，在CSS中创建一个继承渐变背景的三角形，最后，我非常接近，但我不确定如何在背景线性渐变样式中删除白色背景

我做了一个jsfiddle来轻松看到我想要实现的目标......

enter image description here

此线性渐变的相关样式位于小提琴的样式部分的最末端，以及下面： - 

.inner-nav li.active a:after, .inner-nav li.current-menu-item a:after {
    border-color: transparent transparent transparent rgb(91,181,200);
    background: rgb(91,181,200);
    background:     url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top, rgba(91,181,200,1) 0%, rgba(62,165,187,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(91,181,200,1)), color-stop(100%,rgba(62,165,187,1)));
    background: -webkit-linear-gradient(top, rgba(91,181,200,1) 0%,rgba(62,165,187,1) 100%);
    background: -o-linear-gradient(top, rgba(91,181,200,1) 0%,rgba(62,165,187,1) 100%);
    background: -ms-linear-gradient(top, rgba(91,181,200,1) 0%,rgba(62,165,187,1) 100%);
    background: linear-gradient(to bottom, rgba(91,181,200,1) 0%,rgba(62,165,187,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5bb5c8', endColorstr='#3ea5bb',GradientType=0 );
    background: linear-gradient(60deg, transparent 63%, rgb(255, 255, 255) 63%), linear-gradient(-60deg, transparent 63%, rgb(255, 255, 255) 63%), linear-gradient(to right, rgba(91,181,200,1) 0%, rgba(62,165,187,1) 100%);
    transform: rotate(90deg);
}

是否可以修改现有的样式来完成此操作，还是需要以不同的方法重新开始？

1 个答案:

答案 0 :(得分：1)

实现此效果的一种简单方法是取一个正方形并旋转它。

我对你的CSS的唯一更改是在＆＃34; .inner-nav li.active a：after，.inner-nav li.current-menu-item a：after＆＃34;选择器。

＆＃13;
＆＃13; 
.inner-nav {
    float: left;
    display: block;
    width: 300px;
    position: relative;
    z-index: 50;
    z-index: 1;
}

.inner-nav li {
    padding: 0 !important;
    float: left;
    display: block;
    height: 42px;
    width: 100%;
    margin: 0 0 1px;
    font-size: 14px;
    font-weight: 600;
    line-height: 42px;
    text-shadow: 0 1px 1px rgba(0,0,0,0.15);
    background: rgb(193,182,174);
    background: -moz-linear-gradient(top, rgba(193,182,174,1) 0%, rgba(186,172,163,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(193,182,174,1)), color-stop(100%,rgba(186,172,163,1)));
    background: -webkit-linear-gradient(top, rgba(193,182,174,1) 0%,rgba(186,172,163,1) 100%);
    background: -o-linear-gradient(top, rgba(193,182,174,1) 0%,rgba(186,172,163,1) 100%);
    background: -ms-linear-gradient(top, rgba(193,182,174,1) 0%,rgba(186,172,163,1) 100%);
    background: linear-gradient(to bottom, rgba(193,182,174,1) 0%,rgba(186,172,163,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c1b6ae', endColorstr='#baaca3',GradientType=0 );
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

.inner-nav li {
    background: rgb(240,192,96);
    background: -moz-linear-gradient(top, rgba(240,192,96,1) 0%, rgba(240,216,144,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(240,192,96,1,1)), color-stop(100%,rgba(240,216,144,1)));
    background: -webkit-linear-gradient(top, rgba(240,192,96,1,1) 0%,rgba(240,216,144,1) 100%);
    background: -o-linear-gradient(top, rgba(240,192,96,1,1) 0%,rgba(240,216,144,1) 100%);
    background: -ms-linear-gradient(top, rgba(240,192,96,1,1) 0%,rgba(240,216,144,1) 100%);
    background: linear-gradient(to bottom, rgba(240,192,96,1,1) 0%,rgba(240,216,144,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F0C060', endColorstr='#F0D890',GradientType=0 );
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

.inner-nav li i {
    position: absolute;
    left: 0;
    font-size: 22px;
    padding: 10px 0 0 15px;
    color: #ffffff;
    height: 42px;
}

.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.inner-nav li a {
    float: left;
    display: block;
    color: #fff;
    padding: 0 0 0 41px;
    width: 100%;
    height: 100%;
    position: relative;
    font-weight: 600;
}

.inner-nav li a {
    padding-left: 45px !important;
}

.inner-nav .description a:before {
    content: "\e88f";
}
.inner-nav li a:before {
    font-family: 'Material Icons';
    font-size: 24px;
    font-weight: 400;
    position: absolute;
    top: 0;
    left: 10px;
}

.inner-nav li.active, .inner-nav li.active:hover, .inner-nav li.current-menu-item, .inner-nav li.current-menu-item:hover {
    background: rgb(91,181,200);
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top, rgba(91,181,200,1) 0%, rgba(62,165,187,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(91,181,200,1)), color-stop(100%,rgba(62,165,187,1)));
    background: -webkit-linear-gradient(top, rgba(91,181,200,1) 0%,rgba(62,165,187,1) 100%);
    background: -o-linear-gradient(top, rgba(91,181,200,1) 0%,rgba(62,165,187,1) 100%);
    background: -ms-linear-gradient(top, rgba(91,181,200,1) 0%,rgba(62,165,187,1) 100%);
    background: linear-gradient(to bottom, rgba(91,181,200,1) 0%,rgba(62,165,187,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5bb5c8', endColorstr='#3ea5bb',GradientType=0 );
    width: 110%;
}

.inner-nav li.active a:after, .inner-nav li.current-menu-item a:after {
    content: "";
    position: absolute;
    top: 0;
    right: 3px;
    width: 42px;
    height: 42px;
    /* border-style: solid; */
    /* border-width: 21px 0 21px 21px; */
}

.inner-nav li.active a:after, .inner-nav li.current-menu-item a:after  {
    position: absolute;
    top: 6px;
    right: 30px;
    width: 30px;
    height: 30px;
    -webkit-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    transform: rotate(135deg);
    background: linear-gradient(45deg, rgba(91,181,200,1) 0%,rgba(62,165,187,1) 100%);
}
＆＃13; 
<nav class="inner-nav">
            <ul>
                <li class="description active" id=""><i class="fa fa-info-circle"></i><a href="#description" title="Description">Description</a></li><li class="facilities" id=""><i class="fa fa-tasks"></i><a href="#facilities" title="Facilities">Facilities</a></li><li class="availability" id=""><i class="fa fa-clock-o"></i><a href="#availability" title="Availability">Availability</a></li>                <li class="pricing">
                    <i class="fa fa-gbp"></i><a href="#pricing" title="Pricing">Pricing</a>
                </li>
            </ul>
        </nav>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题