Question

我找到了一个绘制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;
}

现在我需要将这张图片放在Button元素中。应该看起来像一个左侧有6点开始的真实按钮。

| *按钮|像这样：）

Answer 1

尝试在标记内包含div - 这里的代码如下： <button onclick="sayHello();"><div id="star-six"> </div></button> http://jsfiddle.net/53mHn/

更新：如果您想要左侧的星形，请在按钮内创建两个div，一个用于星形，另一个用于文本。将星形div的宽度设置为50px（或任何星形宽度），并将float：设置为left。

<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;
}

css在Button链接中绘制了6个点的星形位置

1 个答案: