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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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