Пятиугольная кнопка

#html #css #html5 #css3 #svg

Здравствуйте. Весь день бьюсь над этой кнопкой. Пробовал делать уголок с помощью
border - не работает градиент. Пробовал поворачивать див на 45 градусов - угол стрелки
получается 90 градусов, а на картинке угол тупой. Пробовал рисовать на SVG - не знаю,
как сделать круглые углы. Подскажите как это сделать?





Если видели где-нибудь похожую кнопку - поделитесь ссылкой на страничку.
    

Ответы

Ответ 1

*{
  box-sizing: border-box;
}

.btn{  
  display: inline-block;
  padding: 16px 30px;
  color: #fff; 
  border: 1px solid #4A803C;
  position: relative;
  border-radius: 3px;
  background: rgb(74,168,28); /* Old browsers */
background: -moz-linear-gradient(top, rgba(74,168,28,1) 0%, rgba(63,155,19,1) 100%,
rgba(56,146,12,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(74,168,28,1) 0%,rgba(63,155,19,1) 100%,rgba(56,146,12,1)
100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(74,168,28,1) 0%,rgba(63,155,19,1) 100%,rgba(56,146,12,1)
100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4aa81c', endColorstr='#38920c',GradientType=0 );
}
.btn > span{  
 position:relative;
 z-index: 1; 
}
.btn:after {
    content: "";
    width: 35px;
    height: 35px;    
    display: block;
    position: absolute;
    top: 7px;
    right: -18px;
    border: 1px solid #4A803C;
    border-left: none;
    border-bottom: none;
    border-radius: 3px;
    -webkit-transform: rotateY(45deg) rotate(47deg) skew(5deg);   
    transform: rotateY(45deg) rotate(47deg) skew(5deg);
    background-image: -moz-linear-gradient( 143deg, rgb(74,168,28) 0%, rgb(63,155,19)
100%);
    background-image: -webkit-linear-gradient( 143deg, rgb(74,168,28) 0%, rgb(63,155,19)
100%);
    background-image: -ms-linear-gradient( 143deg, rgb(74,168,28) 0%, rgb(63,155,19)
100%);
    background-image: linear-gradient( 143deg, rgb(74,168,28) 0%, rgb(63,155,19) 100%);
}

.btn:hover{
  background: rgb(56,146,12); /* Old browsers */
background: -moz-linear-gradient(top, rgba(56,146,12,1) 0%, rgba(63,155,19,1) 0%,
rgba(74,168,28,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(56,146,12,1) 0%,rgba(63,155,19,1) 0%,rgba(74,168,28,1)
100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(56,146,12,1) 0%,rgba(63,155,19,1) 0%,rgba(74,168,28,1)
100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#38920c', endColorstr='#4aa81c',GradientType=0 );
}
.btn:hover:after{
  background-image: -moz-linear-gradient( -47deg, rgb(74,168,28) 0%, rgb(63,155,19)
100%);
  background-image: -webkit-linear-gradient( -47deg, rgb(74,168,28) 0%, rgb(63,155,19)
100%);
  background-image: -ms-linear-gradient( -47deg, rgb(74,168,28) 0%, rgb(63,155,19)
100%);
  background-image: linear-gradient( -47deg, rgb(74,168,28) 0%, rgb(63,155,19) 100%);
}

Умножитель матрицы





Fiddle


Ответ 2

Почему бы не отрисовать кнопку в векторном редакторе и не вывести SVG из него? Наскоро
в Adobe Illustrator, скругление кривое – через Filter - Stylize - Round corners. А
по-хорошему его надо делать дугами окружностей, с правильным прилипанием к пиксельной
сетке. Вместо Иллюстратора, Sketch или Fireworks наверное, больше подойдёт.