3

Добрый день как нарисовать такую кнопку ну или блок

кнопка со стрелкой

0

4 ответа 4

6

комментарий @Dmitiy Lore

а на свг как сделать?

На SVG это сделать элементарно, поэтому тут и нет до сих пор этого варианта. Вам необходимо совсем немного научиться рисовать в векторном редакторе.

Зато освоив его, вы сможете делать более сложные фигуры, которые порою невозможно сделать в CSS.

  • Загружаете свой растровый шаблон кнопки в векторный редактор, например: Inkscape

  • С помощью инструмента - рисовать кривые Безье наносите узловые точки по контуру кнопки и с помощью рычагов управления узловыми точками добиваетесь совпадения контуров картинки и ваших кривых

  • Сохраняете файл в формате *.svg и копируете path

введите сюда описание изображения

Для реализации тени добавлено filter: drop-shadow(0 0 15px #DBDBDB);

.container {
width:25vw;
height:25vh;
}
#arrow{
fill:#fff;
stroke:#DBDBDB;
filter: drop-shadow(0 0 15px #DBDBDB);
}
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="svg4" viewBox="0 0 180 150">
 
  <path id="arrow" d="M138 68.3c-.2 8.1-6.3 15.4-11.8 21.3-3.8 4.1-8.4 9.2-14 9.2h-62c-4 0-8-5.1-8-9.2 0-14.1-.8-29.7-.3-44.8.2-3.7 4.6-7.3 8.3-7.3h64.5c4.6 0 8.4 4 11.5 7.3 5.8 6.5 11.9 14.8 11.7 23.5z" />
</svg>
</div>

5

На CSS только так.

body {background: #333;}

.button {
  display: block;
  width: 50px;
  height: 30px;
  border-radius: 8px;
  background: #fff;
  position: relative;
}

.button::after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
  border-top-width: calc(30px / 2 - 4px);
  border-bottom-width: calc(30px / 2 - 4px);
  border-left: 6px solid #fff;
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translate(-1px, -50%);
}
<div class="button"></div>

Лучше сделать на SVG, если требуется везде скругление углов.

1
  • а на свг как сделать? 25 янв 2022 в 16:40
5

Внешний вид можно только эмулировать тщательным подбором значений. Реализовать тень при таком подходе невозможно.

.btn-arrow {
  min-width: 75px;
  min-height: 58px;
  background: unset;
  border: 2px solid lightgray;
  border-right: none;
  border-radius: 8px 4px 4px 8px;
  position: relative;
}

.btn-arrow::after {
  content: '';
  position: absolute;
  right: -12px;
  top: -1px;
  display: block;
  width: 20px;
  height: calc(50% + 4px);
  border-right: 2.6px solid lightgray;
  border-radius: 8px;
  transform: skew(30deg);
}

.btn-arrow::before {
  content: '';
  position: absolute;
  right: -12px;
  bottom: -1px;
  display: block;
  width: 20px;
  height: calc(50% + 4px);
  border-right: 2.6px solid lightgray;
  border-radius: 8px;
  transform: skew(-30deg);
}
<button class="btn-arrow"></button>

2

Получение закругленных уголков с помощью фильтра feColorMatrix

Если применить к фигурам SVG или CSS фильтр, то все острые уголки примут закругленную форму.

 <filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="4" result="blur" />    
            <feColorMatrix in="blur" mode="matrix"
                values="
                  1 0 0 0 0
                  0 1 0 0 0
                  0 0 1 0 0
                  0 0 0 21 -1"
                  result="goo" />
            <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
        </filter>

Радиус закругления можно регулировать с помощью атрибута stdDeviation="4", толщину линий - с помощью изменения строки матрицы в фильтре - 0 0 0 21 -1

Кнопка из вопроса с острыми углами:

.container {
width:30vw;
height:30vh;
}
#arrow {
fill:none;
stroke:grey;
}
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="svg4" viewBox="0 0 180 150">
 <path id="arrow" d="m138 68.3-25.8 30.5H41.8l.2-61.3h72.7z" id="path831" fill="none" stroke="#000" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-opacity="1"/>
</svg>
</div>

Добавляем svg фильтр и получаем закругление уголков:

.container {
width:30vw;
height:30vh;
}
#arrow {
fill:none;
stroke:purple;
filter:url(#goo);
}
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="svg4" viewBox="0 0 180 150">
  <defs>
        <filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="4" result="blur" />    
            <feColorMatrix in="blur" mode="matrix"
                values="
                  1 0 0 0 0
                  0 1 0 0 0
                  0 0 1 0 0
                  0 0 0 21 -1"
                  result="goo" />
            <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
        </filter>
    </defs>
 <path id="arrow" d="m138 68.3-25.8 30.5H41.8l.2-61.3h72.7z"/>
</svg>
</div>

Примеры с фигурами CSS

Первая фигура это образец, ниже та же фигура - .round с закругленными уголками.

#1. Треугольник вершиной вверх

.triangle {
width: 0; 
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #24375B;

}
.round {
width: 0; 
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #24375B;
margin-top:1em;
filter:url(#goo);
}
<div class="triangle"></div>
<div class="round"></div>
<a class="arrow" href="#"></a>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"   xmlns:xlink="http://www.w3.org/1999/xlink"
     width="0" height="0"  >  
   <defs>
        <filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="3" result="blur" />    
            <feColorMatrix in="blur" mode="matrix"
                values="
                  1 0 0 0 0
                  0 1 0 0 0
                  0 0 1 0 0
                  0 0 0 29 -1"
                  result="goo" />
            <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
        </filter>
    </defs>
  
</svg>

#2. Прямоугольный треугольник

 
.triangle90 {
width: 0; 
height: 0;
border-top: 100px solid #68B8AE;
border-right: 100px solid transparent;
}
.round {
width: 0; 
height: 0;
border-top: 100px solid #68B8AE;
border-right: 100px solid transparent;
margin-top:3em;
filter:url(#goo);
}
 
<div class="triangle90"></div>
<div class="round"></div>
<a class="arrow" href="#"></a>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"   xmlns:xlink="http://www.w3.org/1999/xlink"
     width="0" height="0"  >  
   <defs>
        <filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="3" result="blur" />    
            <feColorMatrix in="blur" mode="matrix"
                values="
                  1 0 0 0 0
                  0 1 0 0 0
                  0 0 1 0 0
                  0 0 0 29 -1"
                  result="goo" />
            <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
        </filter>
    </defs>
</svg>

#3. Трапеция

.trap {
height: 0; 
width: 100px;
border-bottom: 100px solid purple;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
.round {
height: 0; 
width: 100px;
border-bottom: 100px solid purple;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
margin-top:3em;
filter:url(#goo);
}
<div class="trap"></div>
<div class="round"></div>
<a class="arrow" href="#"></a>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"   xmlns:xlink="http://www.w3.org/1999/xlink"
     width="0" height="0"  >  
   <defs>
        <filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur" />    
            <feColorMatrix in="blur" mode="matrix"
                values="
                  1 0 0 0 0
                  0 1 0 0 0
                  0 0 1 0 0
                  0 0 0 29 -1"
                  result="goo" />
            <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
        </filter>
    </defs>
  
</svg>

#4. Шестиугольная звезда

.star {
width: 0; 
height: 0; 
margin-bottom: 30px;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #374F9C;
position: relative;
}
.star:after {
content: "";
width: 0; 
height: 0;
position: absolute; 
top: 30px; 
left: -50px;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid #374F9C;
}
.round {
width: 0; 
height: 0; 
margin-bottom: 30px;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #374F9C;
position: relative;
margin-top:100px;
filter:url(#goo);

}
.round:after {
content: "";
width: 0; 
height: 0;
position: absolute; 
top: 20px; 
left: -50px;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 85px solid #374F9C;
margin-top:1em;
filter:url(#goo);
}
<div class="star"></div>
<div class="round"></div>
<a class="arrow" href="#"></a>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"   xmlns:xlink="http://www.w3.org/1999/xlink"
     width="0" height="0"  >  
   <defs>
        <filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="2" result="blur" />    
            <feColorMatrix in="blur" mode="matrix"
                values="
                  1 0 0 0 0
                  0 1 0 0 0
                  0 0 1 0 0
                  0 0 0 29 -1"
                  result="goo" />
            <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
        </filter>
    </defs>
  
</svg>

#5. Стрелка

.arrow {
width: 60px; 
height: 20px; 
margin: 10px 0;
background: springgreen;
position: relative;
}
.arrow:after {
content: "";
width: 0; 
height: 0;
position: absolute; 
top: -10px; 
left: 100%;
border-width: 20px 0 20px 40px;
border-style: solid;
border-color: transparent springgreen;
}
.round {
width: 60px; 
height: 20px; 
margin: 10px 0;
background: springgreen;
position: relative;
margin-top:2em;
filter:url(#goo);
} 
.round:after {
content: "";
width: 0; 
height: 0;
position: absolute; 
top: -10px; 
left: 100%;
border-width: 20px 0 20px 40px;
border-style: solid;
border-color: transparent springgreen;
}
<div class="arrow"></div>
<div class="round"></div>
<a class="arrow1" href="#"></a>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"   xmlns:xlink="http://www.w3.org/1999/xlink"
     width="0" height="0"  >  
   <defs>
        <filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="1" result="blur" />    
            <feColorMatrix in="blur" mode="matrix"
                values="
                  1 0 0 0 0
                  0 1 0 0 0
                  0 0 1 0 0
                  0 0 0 29 -1"
                  result="goo" />
            <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
        </filter>
    </defs>
  
</svg>

#6. Шестиугольник

.hexagon {
margin: 40px 0; 
width: 100px; 
height: 55px;
background: green;
position: relative;
}
.hexagon:before, 
.hexagon:after {
content: "";
width: 0; 
height: 0;
position: absolute; 
left: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
.hexagon:before {
top: -25px;
border-bottom: 25px solid green;
}
.hexagon:after {
bottom: -25px;
border-top: 25px solid green;
}

.round {
margin: 70px 0; 
width: 100px; 
height: 55px;
background: green;
position: relative;
filter:url(#goo);
}
.round:before, 
.round:after {
content: "";
width: 0; 
height: 0;
position: absolute; 
left: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
.round:before {
top: -25px;
border-bottom: 25px solid green;
}
.round:after {
bottom: -25px;
border-top: 25px solid green;
}
<div class="hexagon"></div>
<div class="round"></div>
<a class="arrow1" href="#"></a>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"   xmlns:xlink="http://www.w3.org/1999/xlink"
     width="0" height="0"  >  
   <defs>
        <filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="3" result="blur" />    
            <feColorMatrix in="blur" mode="matrix"
                values="
                  1 0 0 0 0
                  0 1 0 0 0
                  0 0 1 0 0
                  0 0 0 29 -1"
                  result="goo" />
            <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
        </filter>
    </defs>
  
</svg>

#7. Ромб

.diamond {
margin-bottom: 20px; 
width: 0; 
height: 0;
border: 50px solid transparent;
border-bottom: 70px solid #47002D;
position: relative; 
top: -50px;
}
.diamond:after {
content: "";
width: 0; 
height: 0;
position: absolute; 
left: -50px; 
top: 70px;
border: 50px solid transparent;
border-top: 70px solid #47002D;
} 

.round {
margin-bottom: 20px; 
width: 0; 
height: 0;
border: 50px solid transparent;
border-bottom: 70px solid #47002D;
position: relative; 
top: -50px;
margin-top:4em;
filter:url(#goo);
}
.round:after {
content: "";
width: 0; 
height: 0;
position: absolute; 
left: -50px; 
top: 70px;
border: 50px solid transparent;
border-top: 70px solid #47002D;
}
<div class="diamond"></div>
<div class="round"></div>
<a class="arrow1" href="#"></a>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"   xmlns:xlink="http://www.w3.org/1999/xlink"
     width="0" height="0"  >  
   <defs>
        <filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="3" result="blur" />    
            <feColorMatrix in="blur" mode="matrix"
                values="
                  1 0 0 0 0
                  0 1 0 0 0
                  0 0 1 0 0
                  0 0 0 29 -1"
                  result="goo" />
            <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
        </filter>
    </defs>
  
</svg>

1
  • Огромное спасибо!!!! 27 янв 2022 в 7:26

Ваш ответ

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

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