两种颜色的CSS自定义形状按钮

我很努力地使用CSS来创建这个“按钮”。我也希望能够在我的HTML中手动添加文本“ABI”和“12/19”，以便我可以更改它。两种颜色的CSS自定义形状按钮

附加我想要的尺寸的结果。

CSS button

感谢您的帮助。

来源

2014-01-06 Hocacru

你在你的_struggles_写什么码？ – tomsullivan1989

如果你可以显示你在js小提琴中的挣扎，我可以帮你解决 – Ajey

不幸的是，我没有什么有趣的东西可以显示。我真的很难理解在CSS中创建形状的这种逻辑： – Hocacru

我很开心创建它，它并不完美，你会需要一些调整，以得到它exacly像图像，但它应该让你在正确的道路上：

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; 

}

来源

2014-01-06 14:31:26

这真棒chadocat！你是一个拯救生命的人。 – Hocacru

东西

LIKE THIS?

HTML

<div class='button'>ABI 
    <div>12/19</div> 
</div>

CSS

* { 
    margin:0; 
    padding:0; 
    box-sizing:border-box; 
} 
.button, .button div { 
    color:grey; 
    background:#007bff; 
    display:inline-block; 
    line-height:60px; 
    font-size:20px; 
} 
.button div { 
    padding-right:25px; 
    padding-left:25px; 
    width:180px; 
    -webkit-border-top-right-radius: 5px; 
    -webkit-border-bottom-right-radius: 5px; 
    -moz-border-radius-topright: 5px; 
    -moz-border-radius-bottomright: 5px; 
    border-top-right-radius: 5px; 
    border-bottom-right-radius: 5px; 
    z-index:1; 
    text-align:left; 
    position:relative; 
} 
.button { 
    color:#007bff; 
    background:grey; 
    padding-left:25px; 
    width:280px; 
    text-align:right; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    position:relative; 
    z-index:1; 
} 
.button div:after { 
    content:''; 
    display:block; 
    position:absolute; 
    left:0px; 
    top:20px; 
    width: 0px; 
    height: 0px; 
    border-style: solid; 
    border-width: 10px 0 10px 14px; 
    border-color: transparent transparent transparent grey; 
    z-index:0; 
}

来源

2014-01-06 14:36:16 SW4

也做了一个好玩.. :)

Fiddle

CSS

.btn{ 
    position: relative; 
    border-radius: 10px; 
    display: table; 
    font-size: 35px; 
    font-family: Verdana, sans-serif; 
    width: 280px; 
    height: 60px; 
    background: #2a2c2b; 
} 

.left{ 
    position: relative; 
    padding-left: 25px; 
    color: #0ebfe9; 
    display: table-cell; 
    width: 100px; 
    vertical-align: middle; 
} 

.right{ 
    color: #2a2c2b; 
    display: table-cell; 
    width: 180px; 
    vertical-align: middle; 
    padding-left: 14px; 
    padding-right: 25px; 
} 

.left:after 
{ 
    height: 0px; 
    content: ''; 
    border-top: 20px solid transparent; 
    border-bottom: 20px solid transparent; 
    border-left: 20px solid #2a2c2b; 
    position: absolute; 
    left:90px; 
}

HTML

<div class="btn"><span class="left">ABI</span><span class="right">| 12/19</span></div>

（BTN的背景是梯度，不能在代码让他们在这里..）

来源

2014-01-06 14:38:56 Goombah

这似乎不工作在Firefox – tomsullivan1989

而且是这样的：http://jsfiddle.net/vDpYH/1/？ – Goombah

工作正常:) – tomsullivan1989

看着很有趣，不得不试它自己：http://jsfiddle.net/8SUX6/1/

将href =“＃”更改为链接，使其成为一个或添加一个onclick e发泄它执行JS。

<a href="#" id="button">ABI <span>12/19</span></a>

#button { 
font-weight: 600; 
height: 60px; 
width: 60px; /* 60 + 25 + 15 = 100 */ 
display: block; 
text-decoration: none; 
background: #2A2C2B; 
color: #0EBFE9; 
position: absolute; 
border-radius: 5px 0 0 5px; 
font-family: Segoe UI; 
font-size: 40px; 
padding-left: 25px; 
padding-right: 15px; 
} 

#button:before { 
left: 93px; 
top: 10px; 
z-index: 3; 
content:""; 
position: absolute; 
width: 0; 
height: 0; 
border-left: 20px solid #2A2C2B; 
border-top: 20px solid transparent; 
border-bottom: 20px solid transparent; 
} 

#button span { 
top: 0; 
letter-spacing: 2px; 
color: #2A2C2B; 
position: absolute; 
z-index: 2; 
height: 60px; 
width: 155px; /* 155 + 25 = 180px */ 
background: #0EBFE9; 
position: absolute; 
left: 100px; 
border-radius: 0 5px 5px 0; 
padding-right: 25px; 
text-align: right; 
}

来源

2014-01-06 15:22:09

下可以是CSS

*{ 
    margin:0; 
    padding:0; 
    } 

div{ 
    float:left; 
    margin-top:10px; 
    font-size:20px; 
    font-weight:bold; 
    text-align:center; 
    height:60px; 
} 

.abi{ 
    margin-left:10px; 
    width:100px; 
    background:#2A2C2B; 
    color:#0EBFE9; 
    border-radius:10px 0 0 10px; 
    } 

    .abi>p,.num>p{ 
    padding-top:15px; 
    } 

    .num{ 
    color:#2A2C2B; 
    background:#0EBFE9; 
    margin-right:10px; 
    width:180px; 
    border-radius:0 10px 10px 0; 
    } 

    .abi:after{ 
border-bottom: 10px solid transparent; 
    border-left: 10px solid #2A2B2C; 
    border-top: 11px solid transparent; 
    content: ""; 
    position: absolute; 
    left: 110px; 
    top: 29px; 
    }

以下是HTML

<div class="abi"><p>ABI</p></div> 
<div class="num"><p>12/19</p></div>

来源

2014-01-07 05:50:24

两种颜色的CSS自定义形状按钮

回答

相关问题