кнопка с треугольником, градиентный фон

Общее
1

Здравствуйте! Есть кнопка как на картинке, она выполнена чисто на CSS.

Впринципе прицепить треугольник к прямоугольнику не проблема, но только здесь у нас края закруглённые, да и заливка там градиентная. Я уже как не кувыркался, но чёт не соображу, как это сделано. Крч. вот такое убожество вышло https://jsfiddle.net/szhtogky/

2

5 символов

3

каких?

4

Что-то получилось. Не очень конечно, но лучше чем ваш прикрепленный пример.
HTML
<div class="container">
<div class="main">
<div class="arrow"></div>
</div>
</div>

CSS

.container {
width: 215px;
overflow: hidden;
}

.main {
height: 40px;
background-image: linear-gradient(to bottom, #006e2e, #00fe2e);
position: relative;
width: 200px;
border-radius: 4px;
border: 1px solid black;
border-right: none;
}

.arrow {
width: 25px;
height: 25px;
background-image:linear-gradient(135deg, #006e2e, #00fe2e);
position: relative;
transform: rotate(45deg) skew(10deg, 10deg);
top: 7px;
left: 185px;
border-top: 1px solid black;
border-right: 1px solid black;
border-radius: 4px;
z-index: -1;
}
Цвета и рамки естественно не ваши. Всё в целях эксперимента.

5

https://jsfiddle.net/2opp9fvw/1

1 лайк