如何创建仅包含 HTML 和 CSS 的圆形箭头？答案

【问题标题】：How can I create a round arrow with only HTML and CSS?如何创建仅包含 HTML 和 CSS 的圆形箭头？
【发布时间】：2015-07-14 22:58:56
【问题描述】：

我正在尝试使用 CSS 和 HTML 创建一个圆形方向箭头。以下是我的尝试。

Attempt 1

在此我旋转了<div> 和一个箭头，但两者的位置不同。

这是 CSS：

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

更新我想要这样的东西

【问题讨论】：

嗯...它实际上并不是真正的 HTML 代码，但也许您可以使用 SVG 标签找到您想要的内容（这里是一个 SVG 抽屉：svg-edit.googlecode.com/svn/trunk/editor/svg-editor.html#group。您可以通过单击垂直SVG 按钮，只需复制/粘贴即可。）
它看起来像是 SVG 或图标字体的工作，而不是 CSS。
我不是在质疑你问你有什么的理由......我很好奇你需要这个而不是像fortawesome.github.io/Font-Awesome/icons这样简单的图标字体的场景/跨度>
我不想使用任何图像。这就是为什么。

标签： html css css-shapes

【解决方案1】：

#curvedarrow {
  position: relative;
  width: 0;
  height: 0;
  border-top: 9px solid transparent;
  border-right: 9px solid red;
  -webkit-transform: rotate(10deg);
  -moz-transform: rotate(10deg);
  -ms-transform: rotate(10deg);
  -o-transform: rotate(10deg);
}
#curvedarrow:after {
  content: "";
  position: absolute;
  border: 0 solid transparent;
  border-top: 3px solid red;
  border-radius: 20px 0 0 0;
  top: -12px;
  left: -9px;
  width: 12px;
  height: 12px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
}

我在 https://css-tricks.com/examples/ShapesOfCSS/

它可能不是您想要的确切形状，但它绝对是一个很好的起点。

【讨论】：

【解决方案2】：

我已经用 CSS 创建了这个小东西，你可以看一下代码，看看它是如何工作的。

注意：这确实需要纯色背景。

.arrow {
  width: 200px;
  height: 200px;
  border: 6px solid;
  border-radius: 50%;
  position: relative;
}
.arrow:before {
  content: "";
  display: block;
  width: 10px;
  height: 50px;
  background: #fff;
  position: absolute;
  bottom: 0;
  top: 0;
  right: -6px;
  margin: auto;
}
.arrow:after {
  content: "";
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid #000;
  position: absolute;
  bottom: 106px;
  right: -20px;
}

&lt;div class="arrow"&gt;&lt;/div&gt;

【讨论】：

我可以把这个缩小到不到半圈吗？？
我在你的问题用图片更新之前就开始了，如果我看到它，我会像 jbutler483 那样做。

【解决方案3】：

您可以使用伪元素来生成三角形（使用著名的边框技巧）。

之后，您可以在实际元素上使用粗边框（使用 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>

【讨论】：

你也可以在箭头的轴上获得一些有趣的效果——试试border-width: 20px 20px 0 10px; border-style: solid; border-color: black transparent transparent black;
@NiettheDarkAbsol：这太酷了 :) 随着对css-shapes 越来越感兴趣，我想知道你能告诉我你是怎么想到这个问题的吗？
@NiettheDarkAbsol：干杯。想知道所有视图的来源：P

【解决方案4】：

SVG 解决方案

在 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?

【讨论】：

这是一个不错的选择，但并不是每个浏览器都支持 SVG。使用 CSS 更难产生相同的结果。使用 PIE.htc，您无需再担心浏览器支持。但是对于 SVG，您需要一些外部插件或 Flash 才能在旧 IE 版本中呈现它。但我喜欢它看起来很简单。
svg 在 IE8 及以下版本中不受支持。
谢天谢地，IE
人们应该停止害怕 SVG。破解 HTML 矩形只能走这么远……
附带说明，SVG 可以使用 CSS 进行动画和样式设置。这种组合允许简单的 SVG 图标内容与 CSS 的样式控制。 Animating SVG

【解决方案5】：

您可以使用Clockwise open circle arrow (U+21BB) 字符：↻

.arrow {
  display: inline-block;
  font-size: 300px;
  line-height: 200px;
  font-weight: bold;
  transform: rotate(90deg);
}

&lt;span class="arrow"&gt;↻&lt;/span&gt;

【讨论】：

【解决方案6】：

这是另一种使用剪辑路径而不是弄乱边框的方法。

Demo - http://jsfiddle.net/r8rd0yde/4/

.arrow {
  position: relative;
  padding: 20px;
  width: 100px;
  height: 100px;
}
.circle {
  position: absolute;
  box-sizing: border-box;
  height: 100px;
  width: 100px;
  border: 15px solid #000;
  border-radius: 50%;
  -webkit-clip-path: inset(0 50% 0 0);
  clip-path: inset(0 50% 0 0);
}
.triangle {
  position: absolute;
  width: 35px;
  height: 30px;
  background: #000;
  margin-top: -6px;
  margin-left: 38px;
  -webkit-clip-path: polygon(50% 0, 0% 100%, 100% 100%);
  clip-path: polygon(50% 0, 0% 100%, 100% 100%);
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}
/* JUST FOR DEMO */

.arrow:hover {
  -webkit-transform: rotate(720deg);
  -ms-transform: rotate(720deg);
  transform: rotate(720deg);
  transition: all 1.2s;
}

<div class="arrow">
  <div class="circle"></div>
  <div class="triangle"></div>
</div>

【讨论】：