CSS3 信息卡片左上角的倾斜标签

使用CSS3旋转和绝对定位（相对于父元素）实现，无需借助图片，简单实用高效。

CSS3，tab, label

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 8637
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

.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 {
    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;
}

HTML

使用CSS3旋转和绝对定位（相对于父元素）实现，无需借助图片，简单实用高效。

CSS3，tab, label

编辑器支持Emmet

快捷键

使用CSS3旋转和绝对定位（相对于父元素）实现，无需借助图片，简单实用高效。

CSS3，tab, label

使用SVG图片实现的3D悬挂标语（标牌）

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：