如何创建一个只有HTML和CSS的圆形箭头？ [英] How can I create a round arrow with only HTML and CSS?

查看：255
本文介绍了如何创建一个只有HTML和CSS的圆形箭头？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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



尝试1



在这里我已经旋转了< div> 和一个箭头，但是两者都在不同的位置。



这是CSS：



  #curves div {width：100px; height：100px; border：5px solid＃999; }＃curves.width div {border-color：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 =curvesclass =宽度> < div id =curve1>< / div>< span class =arrow-right>< / span>< / div>



尝试2



在这里我创建的箭头是直的。



  .container {width：60％; height：9px;背景：#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>   
 
 
 更新 
我想要这样的东西
 
 
 
  
解决方案
您可以使用伪元素生成三角形（使用着名的边框hack）。
 
 
 
之后，您将能够在实际元素（使用 border-radius 的 50％将其设为圆形）。这允许您根据自己的喜好旋转箭头。 
 
 
 
 
 
 
  div {border：20px solid transparent; border-top-color：black; border-left-color：black; height：100px; width：100px; border-radius：50％;位置：相对; -webkit-transform：rotate（-45deg）; -ms-transform：rotate（-45deg）; transform：rotate（-45deg）; margin：30px auto;} div：before {content：; position：absolute; top：-20px;左：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;颜色：白色; font-size：30px;高度：100％; background：rgb（79，79，79）; / *旧浏览器* / background：-moz-radial-gradient（center，ellipse cover，rgba（79，79，79，1）0％，rgba（34，34，34，1）100％ / * FF3.6 + * /背景：-webkit梯度（径向，中心中心，0px，中心中心，100％，色彩停止（0％，rgba（79,79,79,1））， （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 + * /背景：径向梯度（中心椭圆，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 horizo​​ntal 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％;位置：相对; transform：rotate（-45deg）; margin：30px auto;} div：before {content：; position：absolute; top：-20px;左：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;颜色：白色; font-size：30px;高度：100％; background：rgb（79，79，79）; / *旧浏览器* / background：-moz-radial-gradient（center，ellipse cover，rgba（79，79，79，1）0％，rgba（34，34，34，1）100％ / * FF3.6 + * /背景：-webkit梯度（径向，中心中心，0px，中心中心，100％，色彩停止（0％，rgba（79,79,79,1））， （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 + * /背景：径向梯度（中心椭圆，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回退水平渐变* /}  
 
  HOVER ME< div>< / div>  
 
 
 
 
I'm trying to create a round directional arrow with CSS and HTML. Below are my attempts.



Attempt 1



In this I have rotated the <div> and an arrow, but both are in different positions.



This is the 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



In this the arrow I have created is straight.







.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
I want it something like this



 解决方案 
You could use a pseudo element to generate the triangle (using the famous border hack).



After that, you would be able to use a thick border on the actual element (with a border-radius of 50% to make it a circle). This allows you to rotate the arrow to your liking. 







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>












If you then wanted to lengthen the arrow, you could make the bottom border visible. For example;







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>








                        
这篇关于如何创建一个只有HTML和CSS的圆形箭头？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆