用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裏面的箭頭

回答

相關問題