使用CSS为图标设置一半颜色 [英] Colour half an icon, using css

问题描述

我有一个进度条，它表示批准邮件的各个阶段.该消息可以被部分批准，并且需要再次批准.因此，我需要代表以下内容，只有一半的图标为绿色.这可能吗?

i've got a progress bar, which represents the stages of a message being approved. The message can be partially approved, and required a second approval. I therefore, need to represent the following, with only half of the icon in green. Is this possible?

<div class="stepwizard-step">
  <button type="button" class="btn btn-success btn-circle" disabled="disabled">1</button>
  <p>partially approved/approved</p>
</div>

EDIT

EDIT

EDIT 我正在使用Bootstrap 3.1.1

EDIT I'm using Bootstrap 3.1.1

EDIT Alex，几乎在那里，只需要向前移动文本即可:

EDIT Alex, almost there, just need to move the text forward:

css是:

       .partially-approved {
            border-radius: 50%;
            background: #FFF;
            border: 1px solid #000;
            position: relative;
            overflow: hidden;
        }
        .partially-approved:before {
            background-color: #5cb85c;
            content: " ";
            position: absolute;
            left: 0;
            top: 0;
            right: 50%;
            height: 100%;
        }

这正在应用:

$('button#stage3').attr("class", "btn partially-approved btn-circle");

推荐答案

我在这里为您提供了一个简单的示例:

I made a quick example for you here:

JSFiddle示例

CSS:

#circle{
    width: 2em;
    height: 2em;
    border-radius: 1em;
    border: 1px solid black;
    overflow: hidden;
}
#progress{
    position: relative;
    width: 50%;
    height: 100%;
    background-color: green;
}

与此同时，您也可以通过简单地将进度宽度设置为100％来使用javascript对其进行编辑

With this you can also edit it with javascript by simply setting the width of the progress to 100%

这篇关于使用CSS为图标设置一半颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！