в css можно сделать такую стрелку?

264

05 сентября 2018, 20:00

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

Answer 1

Решение 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.

Answer 2

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

Answer 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)/>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Артефакты в тексте на андроиде

191

HTML

Вывод значения функции

есть функция для вывода серверного времени

182

HTML

Как адптировать iframe?

Есть iframe qiwi копилки,но у него идет фиксированная ширина 520х260Если изменить даже пропорционально - плывет текст

190

HTML

Что такое normalize.css?

Добрый день изучаю верстку ,и учитель прежде чем верстать всегда добавляет файл normalizecss и говорит это для нормирования

278