Добрый день как нарисовать такую кнопку ну или блок
4 ответа
комментарий @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>
На 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, если требуется везде скругление углов.
Внешний вид можно только эмулировать тщательным подбором значений. Реализовать тень при таком подходе невозможно.
.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>
Получение закругленных уголков с помощью фильтра 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>