使用範例
歡迎自行調整及參考!
可以將色碼取代為自己想要的顏色
換色時要注意
出現八碼色碼時 最後的兩碼是用來調整色塊不透明度的 如果想要目前的半透明感覺 請把它保留
.nametag{
color: #410;
font-size: 17px;
height: 42px;
line-height: 42px;
width: 70px;
font-weight: bold;
border-width: 0px;
background:
linear-gradient(135deg, transparent 5px, #E3D0A0c6 0) top left,
linear-gradient(-135deg, transparent 5px, #E3D0A0c6 0) top right,
linear-gradient(-45deg, transparent 5px, #E3D0A0c6 0) bottom right,
linear-gradient(45deg, transparent 5px, #E3D0A0c6 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
margin: 4px;
padding: 0px 10px;
transform: translate(0px,-15px)
}
.option-btn {
color: #410;
font-size: 19px;
height: 50px;
font-weight: bold;
border-width: 0px;
background: linear-gradient(135deg, transparent 10px, #F5DEB3a3 0) top left,
linear-gradient(-135deg, transparent 10px, #F5DEB3a3 0) top right,
linear-gradient(-45deg, transparent 10px, #F5DEB3a3 0) bottom right,
linear-gradient(45deg, transparent 10px, #F5DEB3a3 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
margin: 4px;
}
.option-btn:hover {
background:
linear-gradient(135deg, transparent 10px, #884400ee 0) top left,
linear-gradient(-135deg, transparent 10px, #884400ee 0) top right,
linear-gradient(-45deg, transparent 10px, #884400ee 0) bottom right,
linear-gradient(45deg, transparent 10px, #884400ee 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
color: #F5DEB3;
}
|
頁數 :
|
