или проще скопировать картинку?
3 ответа
Решение 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.
-
-
1@Vlad467 конечно можно, вы теоретически спрашиваете или хотите добавлять новые условия, которых не было в вопросе? 13 июл 2018 в 16:08
Вариант с градиентами
К поверхности стрелок -указателей добавляем линейный градиент:
<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)/>
-
-
@Arthur так топикастер спросил - можно ли сделать градиент, ну я и сделал второй вариант 13 июл 2018 в 17:51
-
Как делать геометрические фигуры через css написано тут так что можете сделать такой вот кривой треугольник в псевдоэлементе :before
или :after
и спозиционировать его к основному блоку, но что будет вам проще я не знаю все зависит от всей картины целиком
-
благодарю за полезную ссылку. Но всё же попробую сделать ответ на svg 13 июл 2018 в 13:31
-
1будет интересно увидеть реализацию. и кстати любопытно что будет более легким в плане загрузки 13 июл 2018 в 13:33