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

CSS code:

-- 双倍攒豆

<i><span class="aliPointView" style="background-color:orange;text-align:center;font-weight:bold;color:white"><p>双倍攒豆</p></span> <span> <span class="aliPointstrikethrough"><p>194欢豆</p></span><br><br><p class="aliPointView">255欢豆</p></span>经济舱</i>


-- 1.5倍攒豆
<i><span class="aliPointView" style="background-color:orange;text-align:center;font-weight:bold;color:white"><p>1.5倍攒豆</p></span><span class="aliPointstrikethrough"><p>100欢豆</p></span><span>  <p class="aliPointView">130欢豆</p></span>经济舱</i>

-- 竖着显示
<i> <span> <span class="aliPointstrikethrough"><p>148欢豆</p></span><br><br><p class="aliPointView">192欢豆</p>
<br>
<span class="aliPointView" style="background-color:orange;text-align:center;font-weight:bold;color:white"><p>双倍攒豆</p></span></span>经济舱</i>



--- details

<div>    <span>￥1580.00</span><br><em class="aliPointstrikethrough">174积分</em><br><em style="">52积分 </em><br><span class="aliPointView" style="background-color:yellow;text-align:center;font-weight:bold;font-size:.5em">双倍攒豆</span></div>

--

<div class="label2">双倍攒豆</div>


/* start 09/02/2020 */
.aliPointstrikethrough {
    border: 1px solid #fff;
    background: #fff;
    text-decoration: line-through;
    color: grey;
}

.aliPointstrikethrough p {
    text-decoration: line-through;
    color: grey;
    font-size: .5em;
}

ul {
    magin: 0;
    padding: 0;
    list-style: none;
}

.cont {
    margin: 20px 30px;
}

.item {
    position: relative;
    line-height: 80px;
    font-size: 18px;
    font-weight: bold;
    background: #f1f1f1;
    margin-bottom: 12px;
    overflow: hidden;
    text-indent: 2em;
}

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

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

.label3 {
    font-size: 13px;
    line-height: 3em;
    width: 6em;
    background: orange;
    position: absolute;
    right: 0;
    top: 0;
    z-Index: 2;
    -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;
    text-align: center;
}

.label4 {
    font-size: 13px;
    line-height: 3em;
    width: 6em;
    background: orange;
    position: absolute;
    left: 0;
    top: 0;
    z-Index: 2;
    -webkit-transform-origin: right bottom;
    -moz-transform-origin: right bottom;
    transform-origin: right 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;
    text-align: center;
}

.label5 {
    font-size: 13px;
    line-height: 32px;
    background: orange;
    position: absolute;
    left: 0;
    bottom: 0;
    z-Index: 2;
    padding: 0 2em;
    -webkit-transform-origin: right top;
    -moz-transform-origin: right top;
    transform-origin: right 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;
}
/* end */

　　http://webfront-js.com/articaldetail/15.html

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

}

 

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

http://www.webfront-js.com/showDemo/DIV%E5%8F%B3%E4%B8%8A%E8%A7%92%E6%A0%87%E7%AD%BE%E7%9A%84CSS%E5%AE%9E%E7%8E%B0.html