Форсирование прозрачного фона на треугольник CSS с линейным градиентом

Question

Я потратил годы, пытаясь придумать решение для создания треугольника в CSS, который наследует градиентный фон, и, наконец, я очень близко, но я не уверен, как удалить белый фон в фоновом режиме линейного градиента.

Я сделал jsfiddle легко увидеть, что я пытаюсь добиться ...

Соответствующих стили для этого линейного градиента находятся в самом конце раздела стилей в скрипке, а также ниже: -

.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); 
} 

Можно ли изменить существующий стиль, чтобы выполнить это, или мне нужно начинать заново с другого подхода?

Answer 1

Простой способ добиться этого эффекта - взять квадрат и повернуть его.

Мои единственные изменения, внесенные в ваш css, указаны в «.inner-nav li.active a: after, .inner-nav li.current-menu-item a: after» selector.

.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%); 
 
}

<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>