CSS-стрелка с градиентом

Я пытаюсь нарисовать левую боковую стрелу с градиентом. Вот код, который я использую, однако я не понимаю, почему он не работает.

.left-arrow{
 position: relative;
 &:after{
 right: 100%;
 top: 50%;
 border: solid transparent;
 content: " ";
 height: 0;
 width: 0; 
 position: absolute;
 pointer-events: none;
 border-color: rgba(51, 51, 51, 0);
 border-right-color: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(115,9,9,1)), color-stop(100%, rgba(236,0,0,1)));
 border-right-color: -webkit-linear-gradient(top, rgba(115,9,9,1) 0%, rgba(236,0,0,1) 100%);
 border-right-color: linear-gradient(to bottom, rgba(115,9,9,1) 0%, rgba(236,0,0,1) 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#730909', endColorstr='#ec0000', GradientType=0 );
 border-width: 50px 20px 50px 0;
 margin-top: -50px;
 }
}

Вот пример. Я просто хочу добавить градиент к этой стрелке слева. http://jsfiddle.net/6zWB3/2/

3 ответа

Существует несколько методов, которые могут дать вам этот результат. В будущем, вероятно, лучший из них будет отсекать. Вы также можете перейти к изображениям границ, но сейчас поддержка также слаба для градиентных изображений.

В то же время вы можете заставить это работать во всем современном браузере с преобразованиями и немного подправить результат

CSS

.left-arrow:after {
 left: -18px;
 top: 40px;
 content: " ";
 height: 36px;
 width: 65px;
 position: absolute;
 pointer-events: none;
 background: linear-gradient(-32deg, #ec0000 0%, #730909 100%);
 -webkit-transform: rotate(74deg) skewX(56deg);
 -webkit-transform-origin: left bottom;
 transform: rotate(74deg) skewX(56deg);
 transform-origin: left bottom;
}

демонстрация


Насколько мне известно, вы не можете применять градиенты к границе напрямую... Новые версии градиентов поддержки webkit в качестве пограничного изображения (http://css-tricks.com/examples/GradientBorder/), но вы можете иметь трудности с попыткой получить эту технику, работающую с такими формами css.

Возможно, вы попытаетесь использовать CSS Masking для выравнивания градиента поверх формы стрелки, хотя мой опыт с этими методами слишком ограничен, чтобы подтвердить, что это сработает или нет. (http://www.html5rocks.com/en/tutorials/masking/adobe/)


Если вы пытаетесь:

SELECTOR {
 border-left: 9px solid #ff00ff;
 border-right: 9px solid transparent;
 border-bottom: 9px solid transparent;
}

Это создаст для вас яркую розовую стрелу.

licensed under cc by-sa 3.0 with attribution.