如何创建仅包含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;
}<div id="curves" class="width">
<div id="curve1"></div><span class="arrow-right"></span>
</div>尝试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>更新 我希望它像这样
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 */
}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-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>- 值得庆幸的是,IE <= 8总共占用不到2.5%的浏览器.我想说网络已经从现在开始了.考虑到这一点,我将开始放弃对8岁以上的IE的支持,并鼓励其他人也这样做. (8认同)
- 人们应该不再害怕SVG.黑客HTML矩形只能到目前为止...... (3认同)
- IE8及以下版本不支持**svg**. (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;
}<div class="arrow"></div>这是使用剪辑路径而不是乱用边框的另一种方法.
演示 - 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>您可以使用顺时针方向打开的圆圈箭头(U + 21BB)字符:?
.arrow {
display: inline-block;
font-size: 300px;
line-height: 200px;
font-weight: bold;
transform: rotate(90deg);
}<span class="arrow">?</span>| 归档时间： |
|
| 查看次数： |
9681 次 |
| 最近记录： |