我很努力地使用CSS來創建這個「按鈕」。 我也希望能夠在我的HTML中手動添加文本「ABI」和「12/19」,以便我可以更改它。兩種顏色的CSS自定義形狀按鈕
附加我想要的尺寸的結果。
感謝您的幫助。
我很努力地使用CSS來創建這個「按鈕」。 我也希望能夠在我的HTML中手動添加文本「ABI」和「12/19」,以便我可以更改它。兩種顏色的CSS自定義形狀按鈕
附加我想要的尺寸的結果。
感謝您的幫助。
我很開心創建它,它並不完美,你會需要一些調整,以得到它exacly像圖像,但它應該讓你在正確的道路上:
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;
}
這真棒chadocat!你是一個拯救生命的人。 – Hocacru
東西
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;
}
也做了一個好玩.. :)
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的背景是梯度,不能在代碼讓他們在這裏..)
這似乎不工作在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;
}
下可以是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>
你在你的_struggles_寫什麼碼? – tomsullivan1989
如果你可以顯示你在js小提琴中的掙扎,我可以幫你解決 – Ajey
不幸的是,我沒有什麼有趣的東西可以顯示。我真的很難理解在CSS中創建形狀的這種邏輯: – Hocacru