4

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

или проще скопировать картинку?

2
  • Добавьте полную картинку
    – Netahaki
    13 июл 2018 в 10:09
  • 4
    Для подобного вроде бы есть SVG
    – andreymal
    13 июл 2018 в 10:11

3 ответа 3

7

Решение SVG

  • Загружаем картинку в векторный редактор и наносим контрольные точки, повторяющие форму фигурной стрелки
  • Сохраняем файл в формате svg
  • Из этого файла забираем только <path> в новый файл svg (для того, чтобы избавиться от кучи служебной информации редактора Inkscape )

  • Обертываем файл в контейнер, у которого задаем ширину и высоту в % для для адаптивности стрелки и регулировки размера.

  • Для обеспечения независимости толщины линий при сильном уменьшении масштаба, добавляем свойство : vector-effect:non-scaling-stroke;

.container {
width:50%;
height:50%;

}
#arrow {
fill:#F0ECEC;
stroke:black;
vector-effect:non-scaling-stroke;
} 
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100%" height="100%" viewBox="0 0 401 350" preserveAspectRatio="xMinYMin meet" >
 
<defs>
<path id="arrow"  d="m25.2 40.8 240.3 0c4.5 0 9.6 5.1 9.6 9.6l0 216.5 90.5-61.5 2.6-0.7 0.4 2.2-93.4 83.1c0 0 0 11.2 0 17.1 0 4.1-5.6 7.4-9.6 7.4l-240.3 0c-3.9 0-8.9-3.6-8.9-7.4l0-256.6c0-4.4 4.5-9.6 8.9-9.6z" /> 

</defs>

<use xlink:href="#arrow" /> 

</svg> 
</div>

  • Патч стрелки размещен в секции defs поэтому мы может его многократно клонировать (при необходимости), вызывая командой <use>

  • Перемещать указатель-стрелку - <use xlink:href="#arrow" transform=" translate(140 120) scale(1 1)" />

  • Масштабировать с одновременным перемещением -
    transform=" translate(140 120) scale(0.15 0.15)" />

Отражать по вертикали и горизонтали -

transform="scale(1 -1)" />

Ниже пример с картой в качестве подложки

.container {
width:100%;
height:100%;

}
path {
fill:#F0ECEC;
stroke:black;
vector-effect:non-scaling-stroke;
} 

#Big_arrow {
fill:transparent;
}
<div class="container">
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" viewBox="0 0 401 350" preserveAspectRatio="xMinYMin meet" border="1">
 <image xlink:href="https://i.stack.imgur.com/sXXJF.jpg" width="401" height="350" /> 
<defs>
<path id="arrow" transform="scale(0.15 0.15)" d="m25.2 40.8 240.3 0c4.5 0 9.6 5.1 9.6 9.6l0 216.5 90.5-61.5 2.6-0.7 0.4 2.2-93.4 83.1c0 0 0 11.2 0 17.1 0 4.1-5.6 7.4-9.6 7.4l-240.3 0c-3.9 0-8.9-3.6-8.9-7.4l0-256.6c0-4.4 4.5-9.6 8.9-9.6z" /> 
<path id="Big_arrow" transform="scale(0.5 0.5)" d="m25.2 40.8 240.3 0c4.5 0 9.6 5.1 9.6 9.6l0 216.5 90.5-61.5 2.6-0.7 0.4 2.2-93.4 83.1c0 0 0 11.2 0 17.1 0 4.1-5.6 7.4-9.6 7.4l-240.3 0c-3.9 0-8.9-3.6-8.9-7.4l0-256.6c0-4.4 4.5-9.6 8.9-9.6z" />
</defs>

<use xlink:href="#arrow" transform=" translate(140 120)  scale(1 1)" /> 
<use xlink:href="#arrow" transform="translate(120 120) scale(1 -1) " /> 
<use xlink:href="#arrow" transform="translate(240 180) scale(1 1) " />  
<use xlink:href="#Big_arrow" transform="translate(200 0)" />

</svg> 
</div>

Для прозрачности стрелки указателя применено свойство:

#Big_arrow {
    fill:transparent;
    }    

Решение полностью адаптивно и работает во всех современных браузерах.

Вёрстка никогда не сломается при уменьшении или увеличении масштаба, так как картинка и указатели находятся в одном файле svg.

2
  • градиент на Svg можно сделать?
    – bad code
    13 июл 2018 в 16:07
  • 1
    @Vlad467 конечно можно, вы теоретически спрашиваете или хотите добавлять новые условия, которых не было в вопросе? 13 июл 2018 в 16:08
3

Вариант с градиентами

К поверхности стрелок -указателей добавляем линейный градиент:

<linearGradient id="gray" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="0" y2="0">
            <stop offset="0%" stop-color="#C4BFBF"/>   
            <stop offset="100%" stop-color="#FCF8F8"/>   
        </linearGradient>     

Команда применения градента - fill="url(#gray)"

Внизу полный код с градиентами

.container {
width:100%;
height:100%;
}

#arrow, #Big_arrow  {
stroke:black;
vector-effect:non-scaling-stroke;

} 
<div class="container">
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" viewBox="0 0 401 350" preserveAspectRatio="xMinYMin meet" border="1">
 <image xlink:href="https://i.stack.imgur.com/sXXJF.jpg" width="401" height="350" /> 
<defs>
<path id="arrow" transform="scale(0.15 0.15)" d="m25.2 40.8 240.3 0c4.5 0 9.6 5.1 9.6 9.6l0 216.5 90.5-61.5 2.6-0.7 0.4 2.2-93.4 83.1c0 0 0 11.2 0 17.1 0 4.1-5.6 7.4-9.6 7.4l-240.3 0c-3.9 0-8.9-3.6-8.9-7.4l0-256.6c0-4.4 4.5-9.6 8.9-9.6z" fill="url(#gray)" /> 
<path id="Big_arrow" transform="scale(0.5 0.5)" d="m25.2 40.8 240.3 0c4.5 0 9.6 5.1 9.6 9.6l0 216.5 90.5-61.5 2.6-0.7 0.4 2.2-93.4 83.1c0 0 0 11.2 0 17.1 0 4.1-5.6 7.4-9.6 7.4l-240.3 0c-3.9 0-8.9-3.6-8.9-7.4l0-256.6c0-4.4 4.5-9.6 8.9-9.6z" fill="url(#gray)" /> 
<linearGradient id="gray" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="0" y2="0">
            <stop offset="0%" stop-color="#C4BFBF"/>   
            <stop offset="100%" stop-color="#FCF8F8"/>   
        </linearGradient>
</defs>

<use xlink:href="#arrow" transform=" translate(140 120)  scale(1 1)" /> 
<use xlink:href="#arrow" transform="translate(120 60) scale(1 1) " /> 
<use xlink:href="#arrow" transform="translate(240 180) scale(1 1) " />  
<use xlink:href="#Big_arrow" transform="translate(200 0)" />

</svg> 
</div>

Как и в примере решения без градиентов, стрелку-указатель можно перемещать с помощью команды:

 <use xlink:href="#arrow" transform=" translate(140 120)/> 
3
  • Так в задаче не просили gradient, или я не так понял?
    – Arthur
    13 июл 2018 в 17:21
  • @Arthur так топикастер спросил - можно ли сделать градиент, ну я и сделал второй вариант 13 июл 2018 в 17:51
  • прошу прощения, слепой))
    – Arthur
    13 июл 2018 в 19:54
1

Как делать геометрические фигуры через css написано тут так что можете сделать такой вот кривой треугольник в псевдоэлементе :before или :after и спозиционировать его к основному блоку, но что будет вам проще я не знаю все зависит от всей картины целиком

2
  • благодарю за полезную ссылку. Но всё же попробую сделать ответ на svg 13 июл 2018 в 13:31
  • 1
    будет интересно увидеть реализацию. и кстати любопытно что будет более легким в плане загрузки 13 июл 2018 в 13:33

Ваш ответ

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

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