HTML实现角标效果：需要Css+元素标签

最新推荐文章于 2024-02-22 17:09:44 发布

原创最新推荐文章于 2024-02-22 17:09:44 发布 · 946 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css

本文介绍了一种使用HTML和CSS实现特殊角标效果的方法。通过设置特定的样式属性，如旋转角度、背景颜色等，可以制作出吸引眼球的角标。适用于网页设计中突出显示重要信息。

HTML实现角标效果：需要Css+元素标签


```html
//最外层的div控制角标的四角范围
<div style="overflow: hidden;position: relative;">
	//角标div
	<div class="supTopNum" ><b>角标上的文字</b></div>
</div>


.supTopNum {
        font-size:17px;
        color: #fff;
        height: 29px;
        width: 132px;
        position: absolute;
        right:87%;
        top: -6px;
        text-align: center;
        line-height: 37px;
        background-color: #ee7f0c;
        transform: rotate(-45deg);
    }