html图⽚倾斜标签,CSS3信息卡⽚左上⾓的倾斜标签CSS
语⾔：
CSSSCSS
确定
.new-item-badge {
position: absolute;
background: #92b7bd;
z-index: 999;
border-radius: 3px;
color: #fff;
font-size: 70%;
padding: 2px 4px 0;
top: -17px;
left: -10px;
line-height: 1.4;
-ms-transform: rotate(-7deg);
-webkit-transform: rotate(-7deg);
transform: rotate(-7deg);
-webkit-transition: 0 0.1s ease-in;
-moz-transition: 0 0.1s ease-in;
-o-transition: 0 0.1s ease-in;
transition: transform 0.1s ease-in;
/
* Most of this code is necessary to style and position the badge. */
}
li {
/* This is also necessary to position it. */
position: relative;
margin: 30px;
list-style: none;
}
li:hover .new-item-badge {
transform: rotate(-14deg);
-ms-transform: rotate(-14deg);
-
webkit-transform: rotate(-14deg);
/* This combined with the transition properties above rotates the badge on hover. */ }
body {
position标签属性background: #f7f7f7;
font-family: sans-serif;
text-transform: uppercase;
}
li a {
color: #333;
background: #fff;
padding: 5px 10px;
border-radius: 3px;
box-shadow: 0 1px 2px #ddd;
text-decoration: none;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。