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>更改为<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>

使用css在circle div中创建一个箭头

1 个答案: