SVG код стрелок для всех направлений одинаковый, отличается только его класс.
Круглая стрелка
Пример стрелки с бордюром, градиентом и тенью
|
1 2 3 4 5 6 7 8 9 10 11 |
<!-- Стрелка влево --> <svg class="arrow-left-1" viewbox="0 0 60 100"><path d="M 50,0 L 60,10 L 20,50 L 60,90 L 50,100 L 0,50 Z"/></svg> <!-- Стрелка вправо --> <svg class="arrow-right-1" viewbox="0 0 60 100"><path d="M 50,0 L 60,10 L 20,50 L 60,90 L 50,100 L 0,50 Z"/></svg> <!-- Стрелка вверх --> <svg class="arrow-top-1" viewbox="0 0 60 100"><path d="M 50,0 L 60,10 L 20,50 L 60,90 L 50,100 L 0,50 Z"/></svg> <!-- Стрелка вниз --> <svg class="arrow-bottom-1" viewbox="0 0 60 100"><path d="M 50,0 L 60,10 L 20,50 L 60,90 L 50,100 L 0,50 Z"/></svg> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
.arrow-left-1, .arrow-right-1, .arrow-top-1, .arrow-bottom-1 { margin: 20px 8px; border-radius: 50%; border: 2px solid #337AB7; width: 80px; height: 80px; cursor: pointer; box-shadow: 0 0 12px 4px #BFE2FF; background: radial-gradient(#fff, #BFE2FF); cursor: pointer; } .arrow-left-1 path, .arrow-right-1 path, .arrow-top-1 path, .arrow-bottom-1 path { fill: rgba(191, 226, 255, 0.6); stroke-width: 2; stroke: #337AB7; transition: fill 0.5s ease-out; } .arrow-right-1 { transform: rotate(180deg); } .arrow-top-1 { transform: rotate(90deg); } .arrow-bottom-1 { transform: rotate(270deg); } .arrow-left-1:hover path, .arrow-right-1:hover path, .arrow-top-1:hover path, .arrow-bottom-1:hover path { fill: #337AB7; } |
Толстая стрелка
В данном примере стрелка довольно толстая, поэтому ховер можно поставить непосредственно на нее, а не ее область.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!-- Стрелка влево --> <svg class="arrow-left-2" viewBox="0 0 9 14"> <path class="svg-arrow" d="M6.660,8.922 L6.660,8.922 L2.350,13.408 L0.503,11.486 L4.813,7.000 L0.503,2.515 L2.350,0.592 L8.507,7.000 L6.660,8.922 Z" /> </svg> <!-- Стрелка вправо --> <svg class="arrow-right-2" viewBox="0 0 9 14"> <path class="svg-arrow" d="M6.660,8.922 L6.660,8.922 L2.350,13.408 L0.503,11.486 L4.813,7.000 L0.503,2.515 L2.350,0.592 L8.507,7.000 L6.660,8.922 Z" /> </svg> <!-- Стрелка вверх --> <svg class="arrow-top-2" viewBox="0 0 9 14"> <path class="svg-arrow" d="M6.660,8.922 L6.660,8.922 L2.350,13.408 L0.503,11.486 L4.813,7.000 L0.503,2.515 L2.350,0.592 L8.507,7.000 L6.660,8.922 Z" /> </svg> <!-- Стрелка вниз --> <svg class="arrow-bottom-2" viewBox="0 0 9 14"> <path class="svg-arrow" d="M6.660,8.922 L6.660,8.922 L2.350,13.408 L0.503,11.486 L4.813,7.000 L0.503,2.515 L2.350,0.592 L8.507,7.000 L6.660,8.922 Z" /> </svg> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
.arrow-left-2, .arrow-right-2, .arrow-top-2, .arrow-bottom-2 { margin: 20px 8px; width: 80px; height: 80px; } .arrow-left-2 path, .arrow-right-2 path, .arrow-top-2 path, .arrow-bottom-2 path { fill: #BFE2FF; stroke-width: .6; stroke: #337AB7; transition: fill 0.5s ease-out; cursor: pointer; } .arrow-left-2 { transform: rotate(180deg); } .arrow-top-2 { transform: rotate(270deg); } .arrow-bottom-2 { transform: rotate(90deg); } .arrow-left-2 path:hover, .arrow-right-2 path:hover, .arrow-top-2 path:hover, .arrow-bottom-2 path:hover { fill: #337AB7; } |
Тонкая стрелка
Самый простой пример из сборника
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!-- Стрелка влево --> <svg class="arrow-left-3" viewBox="0 0 5 9"> <path d="M0.419,9.000 L0.003,8.606 L4.164,4.500 L0.003,0.394 L0.419,0.000 L4.997,4.500 L0.419,9.000 Z" /> </svg> <!-- Стрелка вправо --> <svg class="arrow-right-3" viewBox="0 0 5 9"> <path d="M0.419,9.000 L0.003,8.606 L4.164,4.500 L0.003,0.394 L0.419,0.000 L4.997,4.500 L0.419,9.000 Z" /> </svg> <!-- Стрелка вверх --> <svg class="arrow-top-3" viewBox="0 0 5 9"> <path d="M0.419,9.000 L0.003,8.606 L4.164,4.500 L0.003,0.394 L0.419,0.000 L4.997,4.500 L0.419,9.000 Z" /> </svg> <!-- Стрелка вниз --> <svg class="arrow-bottom-3" viewBox="0 0 5 9"> <path d="M0.419,9.000 L0.003,8.606 L4.164,4.500 L0.003,0.394 L0.419,0.000 L4.997,4.500 L0.419,9.000 Z" /> </svg> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
.arrow-left-3, .arrow-right-3, .arrow-top-3, .arrow-bottom-3 { margin: 20px 8px; width: 80px; height: 80px; cursor: pointer; } .arrow-left-3 path, .arrow-right-3 path, .arrow-top-3 path, .arrow-bottom-3 path { fill: #337AB7; transition: fill 0.5s ease-out; } .arrow-left-3 { transform: rotate(180deg); } .arrow-top-3 { transform: rotate(270deg); } .arrow-bottom-3 { transform: rotate(90deg); } .arrow-left-3:hover path, .arrow-right-3:hover path, .arrow-top-3:hover path, .arrow-bottom-3:hover path { fill: #000; } |
Стрелка с ножкой
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!-- Стрелка влево --> <svg class="arrow-left-4" viewBox="0 0 100 85"> <polygon points="58.263,0.056 100,41.85 58.263,83.641 30.662,83.641 62.438,51.866 0,51.866 0,31.611 62.213,31.611 30.605,0 58.263,0.056" /> </svg> <!-- Стрелка вправо --> <svg class="arrow-right-4" viewBox="0 0 100 85"> <polygon points="58.263,0.056 100,41.85 58.263,83.641 30.662,83.641 62.438,51.866 0,51.866 0,31.611 62.213,31.611 30.605,0 58.263,0.056" /> </svg> <!-- Стрелка вверх --> <svg class="arrow-top-4" viewBox="0 0 100 85"> <polygon points="58.263,0.056 100,41.85 58.263,83.641 30.662,83.641 62.438,51.866 0,51.866 0,31.611 62.213,31.611 30.605,0 58.263,0.056" /> </svg> <!-- Стрелка вниз --> <svg class="arrow-bottom-4" viewBox="0 0 100 85"> <polygon points="58.263,0.056 100,41.85 58.263,83.641 30.662,83.641 62.438,51.866 0,51.866 0,31.611 62.213,31.611 30.605,0 58.263,0.056" /> </svg> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
.arrow-left-4, .arrow-right-4, .arrow-top-4, .arrow-bottom-4 { margin: 20px 8px; width: 80px; height: 80px; cursor: pointer; } .arrow-left-4 polygon, .arrow-right-4 polygon, .arrow-top-4 polygon, .arrow-bottom-4 polygon { fill: #337AB7; transition: fill 0.5s ease-out; } .arrow-left-4 { transform: rotate(180deg); } .arrow-top-4 { transform: rotate(270deg); } .arrow-bottom-4 { transform: rotate(90deg); } .arrow-left-4:hover polygon, .arrow-right-4:hover polygon, .arrow-top-4:hover polygon, .arrow-bottom-4:hover polygon { fill: #BFE2FF; } |
Двойная стрелка
Эту стрелку я использовал для оформления темы fancybox. Можно посмотреть ее в деле
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
<!-- Стрелка влево --> <svg class="arrow-left-5" viewBox="0 0 154 109"> <symbol id="Arrow" viewBox="-73.9 -55.3 135.9 85.4"> <g> <polygon points="-73.9,29.1 -6,-9.2 61.9,30.1 61.9,14.2 -6,-25.1 -73.9,14.2 "/> </g> <g> <polygon points="-73.9,-1 -6,-39.3 61.9,0 61.9,-16 -6,-55.3 -73.9,-16 "/> </g> </symbol> <use xlink:href="#Arrow" width="135.9" height="85.4" id="XMLID_1_" x="-73.9" y="-55.3" transform="matrix(1.007 0 0 -1.007 83.0005 42)" /> </svg> <!-- Стрелка вправо --> <svg class="arrow-right-5" viewBox="0 0 154 109"> <symbol id="Arrow" viewBox="-73.9 -55.3 135.9 85.4"> <g> <polygon points="-73.9,29.1 -6,-9.2 61.9,30.1 61.9,14.2 -6,-25.1 -73.9,14.2 "/> </g> <g> <polygon points="-73.9,-1 -6,-39.3 61.9,0 61.9,-16 -6,-55.3 -73.9,-16 "/> </g> </symbol> <use xlink:href="#Arrow" width="135.9" height="85.4" id="XMLID_1_" x="-73.9" y="-55.3" transform="matrix(1.007 0 0 -1.007 83.0005 42)" /> </svg> <!-- Стрелка вверх --> <svg class="arrow-top-5" viewBox="0 0 154 109"> <symbol id="Arrow" viewBox="-73.9 -55.3 135.9 85.4"> <g> <polygon points="-73.9,29.1 -6,-9.2 61.9,30.1 61.9,14.2 -6,-25.1 -73.9,14.2 "/> </g> <g> <polygon points="-73.9,-1 -6,-39.3 61.9,0 61.9,-16 -6,-55.3 -73.9,-16 "/> </g> </symbol> <use xlink:href="#Arrow" width="135.9" height="85.4" id="XMLID_1_" x="-73.9" y="-55.3" transform="matrix(1.007 0 0 -1.007 83.0005 42)" /> </svg> <!-- Стрелка вниз --> <svg class="arrow-bottom-5" viewBox="0 0 154 109"> <symbol id="Arrow" viewBox="-73.9 -55.3 135.9 85.4"> <g> <polygon points="-73.9,29.1 -6,-9.2 61.9,30.1 61.9,14.2 -6,-25.1 -73.9,14.2 "/> </g> <g> <polygon points="-73.9,-1 -6,-39.3 61.9,0 61.9,-16 -6,-55.3 -73.9,-16 "/> </g> </symbol> <use xlink:href="#Arrow" width="135.9" height="85.4" id="XMLID_1_" x="-73.9" y="-55.3" transform="matrix(1.007 0 0 -1.007 83.0005 42)" /> </svg> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
.arrow-left-5, .arrow-right-5, .arrow-top-5, .arrow-bottom-5 { margin: 20px 8px; width: 80px; height: 80px; cursor: pointer; fill: #337AB7; transition: fill 0.5s ease-out, transform 0.3s ease-in; } .arrow-left-5 { transform: rotate(90deg); } .arrow-right-5 { transform: rotate(270deg); } .arrow-top-5 { transform: rotate(180deg); } .arrow-left-5:hover, .arrow-right-5:hover, .arrow-top-5:hover, .arrow-bottom-5:hover { fill: #BFE2FF; transform: scale(1.2); } .arrow-left-5:hover { transform: rotate(90deg) scale(1.2); } .arrow-right-5:hover { transform: rotate(270deg) scale(1.2); } .arrow-top-5:hover { transform: rotate(180deg) scale(1.2); } |
По аналогии с этими примерами можно использовать любую стрелку в формате SVG. Скачать их можно с сайтов из темы про бесплатные иконки. Затем стрелку повернуть в нужную сторону, задать размер, покрасить и добавить ховер-эффекты.
Добавить комментарий: