我正在努力使用 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/