那些遇到过的问题

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

Man*_*mar 45 html css css-shapes

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

尝试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;
 }
Run Code Online (Sandbox Code Playgroud) 
<div id="curves" class="width">
  <div id="curve1"></div><span class="arrow-right"></span>
</div>
Run Code Online (Sandbox Code Playgroud)

尝试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;
}
Run Code Online (Sandbox Code Playgroud) 
<div class="container">
  </span><span class="arrow-right"></span>
</div>
Run Code Online (Sandbox Code Playgroud)

更新 我希望它像这样

在此输入图像描述

jbu*_*483 54

您可以使用伪元素生成三角形(使用着名的边框黑客).

在那之后,你就可以使用粗边框的实际元素(用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 */
}
Run Code Online (Sandbox Code Playgroud) 
HOVER ME
<div></div>
Run Code Online (Sandbox Code Playgroud)

如果您想延长箭头,可以使底部边框可见.例如;

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 */
}
Run Code Online (Sandbox Code Playgroud) 
HOVER ME
<div></div>
Run Code Online (Sandbox Code Playgroud)

  • 你也可以在箭头的轴上得到一些有趣的效果 - 试试`border-width:20px 20px 0 10px; 边框式:坚固; border-color:黑色透明透明黑色;` (2认同)

Per*_*ijn 26

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>
Run Code Online (Sandbox Code Playgroud)

我可以用吗？

  • 值得庆幸的是,IE <= 8总共占用不到2.5%的浏览器.我想说网络已经从现在开始了.考虑到这一点,我将开始放弃对8岁以上的IE的支持,并鼓励其他人也这样做. (8认同)
  • 人们应该不再害怕SVG.黑客HTML矩形只能到目前为止...... (3认同)
  • IE8及以下版本不支持**svg**. (2认同)

Rud*_*ddy 9

我在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;
}
Run Code Online (Sandbox Code Playgroud) 
<div class="arrow"></div>
Run Code Online (Sandbox Code Playgroud)

Vis*_* M. 6

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

演示 - 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;
}
Run Code Online (Sandbox Code Playgroud) 
<div class="arrow">
  <div class="circle"></div>
  <div class="triangle"></div>
</div>
Run Code Online (Sandbox Code Playgroud)

Ori*_*iol 5

您可以使用顺时针方向打开的圆圈箭头(U + 21BB)字符:?

.arrow {
  display: inline-block;
  font-size: 300px;
  line-height: 200px;
  font-weight: bold;
  transform: rotate(90deg);
}
Run Code Online (Sandbox Code Playgroud) 
<span class="arrow">?</span>
Run Code Online (Sandbox Code Playgroud)

归档时间：

查看次数：

9681 次

最近记录：

10 年，5 月 前
相关归档
使用CSS将Div拆分为2列 81
如何使用linux命令行发送HTML电子邮件 58
使用CSS使跨度不可点击 54
如何使用子弹内联显示无序列表？ 45
HTML输入类型=文件,在提交表单之前获取图像 43
HTML格式的电子邮件根本不在Gmail中显示,但在其他邮件客户端中 43
如何制作Upvote/Downvote按钮？ 24
展开<a>标签以填充空间 22
Twitter Bootstrap - Internet Explorer中的导航栏问题 19
在Edge Browser上,如何使用CSS更改输入占位符文本颜色？ 19
难疑归档
如何使用JavaScript漂亮地打印JSON？ 2222
如何将列表拆分为大小均匀的块？ 2068
如何在Windows上找出正在侦听端口的进程？ 2040
如何在Python中小写一个字符串？ 1908
我怎样才能找到带有Mathematica的Waldo？ 1538
如何在JavaScript正则表达式中访问匹配的组？ 1277
Git diff对付藏匿处 1265
performSelector可能导致泄漏,因为其选择器未知 1251
删除目录的符号链接 1063
如何在JavaScript中将浮点数转换为整数？ 1043