html让div显示在右上角,DIV右上角标签的CSS3实现技巧

我们在写页面中，经常要用到给一个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。

最后我在上一下右下角角签的实现代码.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;

}

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

html让div显示在右上角,DIV右上角标签的CSS3实现技巧相关推荐

html使用div显示会错位,DIV+CSS网页错位诊断和解决方法
你地DIV+CSS网页错位的概念是否了解,这里和大家分享一下常见DIV+CSS网页错位问题及解决方法,希望对你的学习有所帮助. DIV+CSS网页错位诊断随着WEB2.0标准化设计理念的普及,国内很 ...
html页面按钮隐藏div显示,javascript 控制 DIV等html元素的显示和隐藏
1.编写 js函数 function display(id){ var traget=document.getElementById(id); if(traget.style.display==&qu ...
div 显示滚动条的CSS代码
div显示上下左右滚动条 <div style="width:260px;height:120px; overflow:scroll; border:1px solid;"& ...
html div 隐藏滚动条样式,div滚动条样式隐藏与显示
DIV滚动条样式是可以设置的,CSS滚动条同样也可以显示与隐藏,对div设置滚动条,设置其横向滚动条和纵向滚动条样式应该怎么做呢? 要设置CSS滚动条样式,需要用到overflow-y和overflo ...
html中怎么实现广告自动出来又自动隐藏?,基于jquery实现的定时显示与隐藏div广告的实现代码...
基于jquery实现的定时显示与隐藏div广告的实现代码下面我给大家分享我的方法: 在jquery中要显示与隐藏层是很简单的直接使用hide与show方法就可以了,但要定时我们需要利用setTime ...
css文字溢出部分在另一个div显示（代码篇）
css文字溢出部分在另一个div显示博主博客: 前端代码:html.css(图文混排)文字环绕 - 案例篇以上就是关于 " css文字溢出部分在另一个div显示(代码篇) " ...
前端：JS/29/实例:控制div显示_滚动的图片
实例:控制div显示_滚动的图片 <!DOCTYPE html> <html lang="en"><head><meta charset= ...
jquery之超简单的div显示和隐藏特效demo
闲着无聊,看到某视频网站上讲的DIV显示和隐藏的效果,自己也写了一个. 觉得还是挺简单的. 前端改变世界!嘿嘿,还挺有成就感 <!DOCTYPE html PUBLIC "-//W3C ...
jquery点击按钮显示和隐藏div
[转]jquery点击按钮显示和隐藏DIv 1 function changeDisplay() { 2 if ($("#btnShow").attr("value&qu ...

html让div显示在右上角,DIV右上角标签的CSS3实现技巧

html让div显示在右上角,DIV右上角标签的CSS3实现技巧相关推荐

最新文章

热门文章