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点按钮链接

回答

相关问题