如何创建一个只有HTML和CSS的圆形箭头？

尝试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 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％;位置：相对; 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 1In 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 2In 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>UpdateI 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的圆形箭头？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！上岸，阿里云！