DIV右上角标签的CSS3实现技巧

最新推荐文章于 2024-06-28 17:10:15 发布

TwoBE9876

最新推荐文章于 2024-06-28 17:10:15 发布

阅读量1.2k

点赞数

分类专栏： css html 文章标签： css3 前端 css

原文链接：http://www.webfront-js.com/articaldetail/15.html

版权

html 同时被 2 个专栏收录

27 篇文章 0 订阅

订阅专栏

css

11 篇文章 0 订阅

订阅专栏

本文探讨了如何使用CSS3的transform属性来在DOM元素的右上角和右下角添加角标，无需繁琐地调整像素。通过设置transform-origin、translate和rotate，可以创建出适应不同高度的角标。同时，介绍了如何通过变换角度和位置实现其他角落的角标效果。

摘要由CSDN通过智能技术生成

我们在写页面中，经常要用到给一个div或其他dom元素的右上角添加一个标签来表示此条目的状态或者特性，今天我们就探讨一下这个标签的实现方式

我们一般要实现这种标签的时候通过用css3的rotate来实现，并且大部分人实现时是通过一像素，一像素的调节标签的偏移位置来达到我们满意的效果。这个调像素的过程是让我们抓狂的，因为他没有实用性，我们好不容易写好了一个角签，然而他只能在这个样式或者这个角签内容时是正常的。

其中用到了translate百分比的特性，他跟margin和padding不同，他的百分比是相对于他本身的宽高进行计算的。所以我们可以做不确定div高度的情况下，通过translateY(-100%)来让他的底部对其容器的顶部。

.label{
font-size:13px;
line-height:32px
;background:orange;
position:absolute;
right:0;
top:0;
z-Index:2;
padding:0 2em;
-webkit-transform-origin:left bottom;
-moz-transform-origin:left bottom;
transform-origin:left bottom;
-webkit-transform:translate(29.29%,-100%) rotate(45deg);
-moz-transform:translate(29.29%,-100%) rotate(45deg);
transform:translate(29.29%,-100%) rotate(45deg);
text-indent:0;
}

根据以上的计算草稿，得出右上角角签的transform样式如上代码。

你还可以举一反三，得到其左上角，右下角，左下角的坐标样式的确定值。

如果想要让角签完全覆盖容器的边角，那么就角签的宽度为高度的1/2。

你可以狠狠点击这里查看CSS3实现的角签效果。

最后我在上一下右下角角签的实现代码

.label2{
font-size:13px;
line-height:32px;
background:orange;
position:absolute;
right:0;
bottom:0;
z-Index:2;
padding:0 2em;
-webkit-transform-origin:left top;
-moz-transform-origin:left top;
transform-origin:left top;
-webkit-transform:translate(29.29%,100%) rotate(-45deg);
-moz-transform:translate(29.29%,100%) rotate(-45deg);
transform:translate(29.29%,100%) rotate(-45deg);
text-indent:0;
}

你可以根据此砖来得到你想要的玉。