用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的知识，那么多的量。

如果你能给我一些提示，那就太好了。

来源

2014-10-01 Raj

是内部这个圈子。 – 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

使用: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>

来源

2014-10-01 16:04:44 misterManSam

非常感谢。现在都在工作。再次感谢您的帮助。 – Raj 2014-10-01 16:15:29

用css创建一个带圆圈的div里面的箭头

回答

相关问题