使用css在带圆圈的div内创建一个箭头

Question

我用css创建了一个带圆圈的div,我想用css将箭头朝向正确的方向,但我仍坚持使用它.

我创造了一个小提琴 - http://jsfiddle.net/9scow7c3/2/

<div id="search">
    <input type="submit" class="circle-search-button" value="" />
</div>

我读到了可以使用的地方:之后:之前但我没有那么多的css3知识.

如果你能给我一些提示,那就太棒了.

Answer 1

使用:before伪元素:

• 将<input>to 更改<button>为允许子元素.

• 按钮设置为position: relative,并且position: absolute伪元素将相对于它定位自身

• 箭头从顶部,左侧和底部边框创建.透明边框形成三角形

伪:before元素的行为与此相同:

<button>
    <div>I am :before</div>
</button>

CSS/HTML/Demo

.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>