3

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


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

2
  • habrahabr.ru/post/126207 23 июн 2016 в 19:27
  • @DenisKhvorostin Я видел эту ссылку. Там все фигуры нарисованы с помощью border. К ним нельзя применить градиент или border.
    – kvazarich
    23 июн 2016 в 19:32

2 ответа 2

5

*{
  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%);
}
<a href="#" class="btn">
<span>Умножитель матрицы</span>
</a>

Fiddle

3
  • Похожий код я сегодня уже тоже писал. Самый правый уголок у кнопки прямой, а на картинке - тупой. И углы на картинке более закругленные. border-radius: 5px ничего не решает - все расползается. (но пока что это наиболее близкое к картинке из того, что я перебрал за день)
    – kvazarich
    23 июн 2016 в 20:34
  • @kvazarich - сделал угол более тупым
    – soledar10
    24 июн 2016 в 6:26
  • jsfiddle.net/soledar10/r2930cy2
    – soledar10
    24 июн 2016 в 6:49
2

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

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="256px" height="256px" viewBox="0 0 256 256" enable-background="new 0 0 256 256" xml:space="preserve">
  <g id="Layer_1">
    <g>
      <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="127.2778" y1="71" x2="127.2778" y2="111">
        <stop offset="0" style="stop-color:#FFFFFF" />
        <stop offset="1" style="stop-color:#000000" />
      </linearGradient>
      <path fill="url(#SVGID_1_)" d="M212.053,109.3c-0.579,0.935-1.953,1.7-3.053,1.7H34c-1.1,0-2-0.9-2-2V73c0-1.1,0.9-2,2-2h175
			c1.1,0,2.462,0.772,3.026,1.717l10.114,16.916c0.564,0.944,0.553,2.482-0.026,3.417L212.053,109.3z" />
      <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M212.053,109.55c-0.579,0.935-1.953,1.95-3.053,1.95H34
			c-1.1,0-2.5-1.4-2.5-2.5V73c0-1.1,1.4-1.5,2.5-1.5h175c1.1,0,2.462,0.522,3.026,1.467l10.114,16.791
			c0.564,0.944,0.553,2.544-0.026,3.479L212.053,109.55z" />
    </g>
  </g>
</svg>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.