Cоздать круглую стрелку с использованием только HTML и CSS?

Question

Я пытаюсь создать круглую стрелку направления с CSS и HTML. Ниже приведены мои попытки.

Attempt 1

В этом коде я повернул div и стрелку, но они находятся в разных позициях.

#curves div {
   width: 100px;
   height: 100px;
   border: 5px solid #999;
 }
 #curves.width div {
   border-color: transparent transparent transparent #999;
 }
 #curve1 {
   -moz-border-radius: 50px 0 0 50px;
   border-radius: 50px 0 0 50px;
 }
 .arrow-right {
   width: 0;
   height: 0;
   border-top: 10px solid transparent;
   border-bottom: 10px solid transparent;
   border-left: 27px solid #ccc;
   float: right;
   margin-top: -7px;
   margin-right: -26px;
 }

<div id="curves" class="width">
  <div id="curve1"></div><span class="arrow-right"></span>
</div>

Attempt 2

В этом примере стрелка, которую я создал,- прямая.

.container {
  width: 60%;
  height: 9px;
  background: #ccc;
  margin: 100px auto;
  -moz-border-radius: 50px 0 0 50px;
  border-radius: 50px 0 0 50px;
}
.arrow-right {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 27px solid #ccc;
  float: right;
  margin-top: -7px;
  margin-right: -26px;
}

<div class="container">
  </span><span class="arrow-right"></span>
</div>

Update Я хочу получить, что-то вроде этого.

Перевод вопроса: How can I create a round arrow with only HTML and CSS? @MKD

ассоциация:http://stackoverflow.com/questions/30049084/how-can-i-create-a-round-arrow-with-only-html-and-css/30050132#30050132 — Alexandr_TT, Apr 01 '17 at 13:10
svg решение статично, кто может добавить анимацию? Варианты решений только приветствуются. — Alexandr_TT, Apr 01 '17 at 13:30

score 7 · Answer 1 · edited May 23 '17 at 12:39

CSS решение:

Вы можете использовать псевдоэлемент для генерации треугольника (используя известный border hack ).

После этого, вы сможете использовать толстую границу для фактического элемента (с border-radius в 50%, чтобы сделать его кругом). Это позволит вам поворачивать стрелку по своему усмотрению.

div {
  border: 20px solid transparent;
  border-top-color: black;
  border-left-color: black;
  height: 100px;
  width: 100px;
  border-radius: 50%;
  position: relative;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  margin:30px auto;
}
div:before {
  content: "";
  position: absolute;
  top: -20px;
  left: 80%;
  height: 0;
  width: 0;
  border-left: 30px solid black;
  border-top: 30px solid transparent;
  border-bottom: 30px solid transparent;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
/BELOW IS FOR DEMO ONLY/
div:hover {
  -webkit-transform: rotate(315deg);
  -ms-transform: rotate(315deg);
  transform: rotate(315deg);
  transition: all 0.8s;
}
html {
  text-align:center;
  color:white;
  font-size:30px;
  height: 100%;
  background: rgb(79, 79, 79);
  /* Old browsers /
  background: -moz-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
  / FF3.6+ /
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(79, 79, 79, 1)), color-stop(100%, rgba(34, 34, 34, 1)));
  / Chrome,Safari4+ /
  background: -webkit-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
  / Chrome10+,Safari5.1+ /
  background: -o-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
  / Opera 12+ /
  background: -ms-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
  / IE10+ /
  background: radial-gradient(ellipse at center, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
  / W3C /
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#4f4f4f', endColorstr='#222222', GradientType=1);
  / IE6-9 fallback on horizontal gradient */
}

HOVER ME
<div></div>

Если вы хотите удлинить стрелку, вы можете сделать нижнюю границу видимой. Например:

div {
  border: 20px solid transparent;
  border-top-color: black;
  border-left-color: black;
  border-bottom-color: black;
  height: 100px;
  width: 100px;
  border-radius: 50%;
  position: relative;
  transform: rotate(-45deg);
  margin:30px auto;
}
div:before {
  content: "";
  position: absolute;
  top: -20px;
  left: 80%;
  height: 0;
  width: 0;
  border-left: 30px solid black;
  border-top: 30px solid transparent;
  border-bottom: 30px solid transparent;
  transform: rotate(45deg);
}
/BELOW IS FOR DEMO ONLY/
div:hover {
  transform: rotate(315deg);
  transition: all 0.8s;
}
html {
  text-align:center;
  color:white;
  font-size:30px;
  height: 100%;
  background: rgb(79, 79, 79);
  /* Old browsers /
  background: -moz-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
  / FF3.6+ /
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(79, 79, 79, 1)), color-stop(100%, rgba(34, 34, 34, 1)));
  / Chrome,Safari4+ /
  background: -webkit-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
  / Chrome10+,Safari5.1+ /
  background: -o-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
  / Opera 12+ /
  background: -ms-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
  / IE10+ /
  background: radial-gradient(ellipse at center, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
  / W3C /
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#4f4f4f', endColorstr='#222222', GradientType=1);
  / IE6-9 fallback on horizontal gradient */
}

HOVER ME
<div></div>

Перевод ответа: How can I create a round arrow with only HTML and CSS? @jbutler483

score 7 · Answer 2 · edited May 23 '17 at 12:39

SVG решение

Форма действительно проста в создании при использовании SVG.

<svg width="200px" height="200px" viewbox="0 0 400 400">
  <path stroke="#000" stroke-width="50" fill="none"
        d="M200 350 A 100 100 0 0 1 200 150
           M200 150 200 125 225 150 200 175Z"/>
</svg>

Can i use it?

Перевод ответа: How can I create a round arrow with only HTML and CSS?@Persijn

score 3 · Accepted Answer · 2017-04-02T12:46:01.570

Может быть это не красивое решение но рабочее

* {
  margin: 0;
}
div {
  width: 100px;
  height: 100px;
  border-width: 10px;
  border-color: transparent transparent #000 #000;
  border-style: solid;
  border-radius: 100px;
  position: relative;
  margin: 20px;
}
div:after {
  content: "";
  border: 20px solid transparent;
  border-bottom: 20px solid #000;
  position: absolute;
  transform: rotate(45deg);
  top: -20px;
  right: 58px;
}
div:hover {
  transform: rotate(3600deg);
  transition: all 12s linear;
}

<div></div>

ща поправлю ... чуток уменьшил на 1сек — , Apr 02 '17 at 12:45

score 2 · Answer 4 · edited Apr 13 '17 at 12:53

SVG анимация

Для анимации вращения круглой стрелки необходимо точно найти геометрический центр круга, сектором которого является стрелка. Иначе будет неравномерное вращение, подергивания и другие дефекты.
Координаты центра "виртуального" круга - 200px 250px
Команда на вращение - rotate(360 200 250), где 360 угол поворота

<svg xmlns:xlink="http://www.w3.org/1999/xlink" 
    xmlns="http://www.w3.org/2000/svg"
 version="1.1" width="200px" height="200px" viewBox="0 50 400 400" >
    <desc>Rotate arrow</desc>
  <defs>
        <radialGradient id="RadGrad"
           fx="5%" fy="5%" r="65%"
           spreadMethod="pad">
          <stop offset="0%"   stop-color="dodgerblue" />
          <stop offset="100%" stop-color="white"  />
        </radialGradient>
    </defs>
&lt;!-- Background with a radial gradient --&gt;
&lt;rect x="0" y="0" width="400" height="450" rx="10" ry="10"   style="fill:url(#RadGrad);" /&gt;


<path  stroke-width="30" stroke="#FFF" fill="none"  d="M200 350 A 100 100 0 0 1 200 150 M200 150 200 125 225 150 200 175Z">
  <!-- The animation for 2 seconds repeated 2 times -->
  <animateTransform id="an1" attributeName="transform" type="rotate" begin="0s;an2.end" dur="2s" repeatCount="2" values="0 200 250;360 200 250"/>
<!-- Pause 1 second -->
  <animateTransform id="an2" attributeName="transform" type="rotate" begin="an1.end" dur="1s" repeatCount="1" values="0 200 250;0 200 250"/>
 </path>
 &lt;!-- &lt;circle cx="200" cy="250" r="4" fill="red"/&gt; --&gt;

</svg>

Сценарий анимации

вращение стрелки на полных 2 оборота, длительность каждого 2 секунды
Пауза - 1 секунда
Переход к первой анимации и т.д по кругу

Очень похожий пример реализации, с подробным описанием, схемой реализации можно посмотреть здесь, на нашем сайте.

Реализация сценария

Вращение animateTransform id="an1" attributeName="transform" type="rotate"
изменяется значение угла поворота 0-360 при помощи параметра:

values="0 200 250;360 200 250"
Пауза
animateTransform id="an2" attributeName="transform" type="rotate" values="0 200 250;0 200 250" угол поворота не изменяется - стрелка стоит на месте.
Переход к первой анимации после окончания второй анимации

begin="an2.end"

Поиграйтесь с кодом, реализуя свои сценарии.