html - 具有两种颜色的CSS自定义形状按钮

我正在努力创建这个“按钮”使用CSS。
我也希望能够在我的HTML中手动添加文本“ABI”和“12/19”，以便我可以更改它。
附上的结果，我想与尺寸。
谢谢你的帮助。

最佳答案

我很高兴创建它，它不是完美的，你需要一些调整，使它像图片一样，但它应该让你走上正确的道路：
FIDDLE DEMO
html格式：

<div id="abi">ABI</div>
<div id="number">12/19</div>

CSS

div{
    float:left;
    height:60px;
    line-height:60px;
    font-size:20px;
    margin:0;
    padding:0;
}
#abi{
    width:75px;
    background:gray;
    color:blue;
    padding-left:25px;
    position:relative;
    z-index:2;
    -webkit-border-radius: 5px 0 0 5px;
border-radius: 5px 0 0 5px;
}
#abi:after{
    content:"";
    position:absolute;
    right:-10px;
    top: 19px;
    width: 0;
    height: 0;
    border-top: 11px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid gray;
}
#number{
    width:155px;
    text-align:right;
    padding-right:25px;
    background:blue;
    color:gray;
    -webkit-border-radius: 0 5px 5px 0;
border-radius: 0 5px 5px 0;

}

关于html - 具有两种颜色的CSS自定义形状按钮，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20951767/