CSS繪製的6點按鈕鏈接

內星的地方，我發現一個代碼繪製6點明星：CSS繪製的6點按鈕鏈接

#star-six { 
width: 0; 
height: 0; 
border-left: 50px solid transparent; 
border-right: 50px solid transparent; 
border-bottom: 100px solid red; 
position: relative; 
} 
#star-six:after { 
width: 0; 
height: 0; 
border-left: 50px solid transparent; 
border-right: 50px solid transparent; 
border-top: 100px solid red; 
position: absolute; 
content: ""; 
top: 30px; 
left: -50px; 
}

現在我需要把按鈕元素內這張圖片。應該看起來像一個真正的按鈕，左側有6個點的起點。

| * Button |像這樣的:)

來源

2014-03-25 user3460866

發佈與演示代碼。所以我們有一個想法你在做什麼。 –

即時通訊不能確定你發佈的CSS是什麼，但它確實沒有繪製任何東西，因爲你根本不用繪製CSS。請同時發佈您的HTML，以便我們可以看到最新消息 – Banana

爲什麼重新發明輪子：http://fortawesome.github.io/Font-Awesome/icon/star/ –

嘗試包括標籤內一個div - 這樣的代碼在這裏： <button onclick="sayHello();"><div id="star-six"> </div></button> http://jsfiddle.net/53mHn/

更新時間：如果你想在左邊的星號，創建您的按鈕內兩個div ，一個是明星，一個是你的文字。將星形div的寬度設置爲50px（或者任何星形寬度），並將float：設置爲左側。

<button onclick="sayHello();"><div class="star-content star-icon" id="star-six">&nbsp;</div><div class="star-content">This is the text inside of my button</div></button>

CSS是在這裏：

.star-icon { 
    width: 50px; 
    float: left; 
}

來源

2014-03-25 17:55:02 user3446496

他要求星星在左側。 – Banana

我更新了JSFiddle： http://jsfiddle.net/53mHn/1/ 訣竅是爲該明星創建一個div，然後在該按鈕內部爲文本創建一個div，然後將該明星的div設置爲向左飄浮。 – user3446496

CSS繪製的6點按鈕鏈接

回答

相關問題