html文本角标设计,css实现角标

效果图：

简单方式可以使用背景图片，但这里我使用的css来实现，最笨的方式是使用矩形div然后旋转遮挡就可以，

角标实现

换

样式

.checked-item {

position: relative;

padding : 7px 10px;

border : 1px solid #ebebeb;

text-align : center;

color : #808080;

background-color : #fff; overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

}

.replace-item {

right: 0;

top: 0;

position: absolute;

color: #ffffff;

font-size: 12px;

}

.jiao, .desc {

position: absolute;

top:0;

right: 0;

}

.jiao {

width: 20px;

height: 37px;

transform: rotate(-50deg);

-webkit-transform: rotate(-50deg);

-moz-transform: rotate(-50deg);

-ms-transform: rotate(-50deg);;

top: -15px;

right: -4px;

background-color: #ff685d;

padding:0;

}

.desc {

top: -2px;

}

CSS实现文字旋转/实现角标

主要用到属性transform:rotate(-30deg) example: .divedittable .project-tag div { width: 43px; line-height: 4 ...

bootstrap4 Reboot details summary 美化(点选禁止选中文本，单行隐藏角标，多行后移)

bootstrap4 Reboot details summary 优化这块,主要是为了去掉details summary的角标~ 所以优化写了一下. 原始HTML & ...

HTML页面仿iphone数字角标

做仿iphone样式的数字角标,用简单的css来实现

角标数字