用css创建一个带圆圈的div里面的箭头
问题描述:
我用css创建了一个圆圈div,我想用css把箭头朝向正确的方向,但我坚持使用它。用css创建一个带圆圈的div里面的箭头
我创建了一个小提琴 - http://jsfiddle.net/9scow7c3/2/
<div id="search">
<input type="submit" class="circle-search-button" value="" />
</div>
我读的地方,可以做到用:后:过,但我没有CSS3的知识,那么多的量。
如果你能给我一些提示,那就太好了。
答
使用:before
伪元素:
更改
<input>
到<button>
,使子元素。该按钮被设置为
position: relative
和position: absolute
伪元件将关于其自身定位于它箭头从顶部创建的,左和底部的边界。透明边界创建一个三角形形状
伪:before
元件的行为与此相同:
<button>
<div>I am :before</div>
</button>
CSS/HTML /演示
.circle {
width: 15%;
height: 0;
padding-bottom: 15%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
background: #ccc;
position: relative;
border: none;
}
.circle:before {
content: '';
display: block;
border-top: solid 10px transparent;
border-left: solid 10px #FFF;
border-bottom: solid 10px transparent;
position: absolute;
top: 50%;
left: 50%;
margin: -10px 0 0 -3px;
}
<button type="submit" class="circle" value=""></button>
+0
非常感谢。现在都在工作。再次感谢您的帮助。 – Raj 2014-10-01 16:15:29
是内部这个圈子。 – Raj 2014-10-01 16:01:59
[Here](http://html-generator.weebly.com/css-shape-generator.html#007BFFy9z-69z-12z8z0)你可以生成一个css箭头,然后把它放在':before/:在标签之后,只需添加'content:'';'和'position:absolute;'并调整边距 – Banana 2014-10-01 16:04:32
您不能在输入中使用像':after'这样的伪元素。 – 2014-10-01 16:04:54