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

#css #html5 #css3 #svg #css_animation

Я пытаюсь создать круглую стрелку направления с 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;
 }

  






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;
}

  





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

    

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

Ответы

Ответ 1

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



* {
  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;
}



Ответ 2

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 {
  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





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


Ответ 3

SVG решение

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



  




Can i use it?    

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


Ответ 4

SVG анимация

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





   

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


вращение стрелки на полных 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"     

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