带有两种颜色的CSS自定义形状按钮 [英] CSS custom shape button with two colors

问题描述

我正在努力使用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; 
保证金：0; 
 padding：0; 
} 
 #abi {
 width：75px; 
背景：灰色; 
颜色：蓝色; 
 padding-left：25px; 
职位：亲属; 
 z-index：2; 
 -webkit-border-radius：5px 0 0 5px; 
 border-radius：5px 0 0 5px; 
} 
 #abi：在{
 content：; 
位置：绝对; 
 right：-10px; 
 top：19px; 
 width：0; 
 height：0; 
 border-top：11px纯透明; 
 border-bottom：10px纯透明; 
 border-left：10px纯灰色; 
} 
 #number {
 width：155px; 
 text-align：right; 
 padding-right：25px; 
背景：蓝色; 
颜色：灰色; 
 -webkit-border-radius：0 5px 5px 0; 
 border-radius：0 5px 5px 0; 
 
} 
  

I am struggling to create this "button" using CSS. I also would like to be able to add the text "ABI" and "12/19" manually in my HTML so I can change it.

Attached the result I would like to have with the dimensions.

Thanks for your help.

解决方案

I had fun creating it, it is not perfect and you will need some tweaking to get it exacly like the image but it should get you on the right path :

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;

}

这篇关于带有两种颜色的CSS自定义形状按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！