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。
最后我在上一下右下角角签的实现代码
.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;} |
你可以根据此砖来得到你想要的玉。
