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