css3翻转和转移实现右上角覆盖标签

最新推荐文章于 2023-11-11 17:33:23 发布
最新推荐文章于 2023-11-11 17:33:23 发布
阅读量444 收藏
点赞数 1
分类专栏： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/feifantiantang/article/details/98075626
版权

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <style>
        .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;
        }

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

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

    <body>
        <div class='cont'>
            <ul>
                <li class='item'>
                    mooshine
                    <div class='label'>热门</div>
                </li>
                <li class='item'>
                    mooshine
                    <div class='label2'>Hot tap</div>
                </li>
                <li class='item'>
                    mooshine--宽为高的1/2.
                    <div class='label3'>新加</div>
                </li>
                <li class='item'>
                    mooshine--left
                    <div class='label4'>特殊</div>
                </li>
                <li class='item'>
                    mooshine--left-bottm
                    <div class='label5'>角签</div>
                </li>
            </ul>
        </div>
        </div>

    </body>
</html>

feifantiantang
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
div标签加css,DIV右上角标签的CSS3实现技巧
weixin_29840475的博客
08-03 601
我们在写页面中，经常要用到给一个div或其他dom元素的右上角添加一个标签来表示此条目的状态或者特性，今天我们就探讨一下这个标签的实现方式我们一般要实现这种标签的时候通过用css3的rotate来实现，并且大部分人实现时是通过一像素，一像素的调节标签的偏移位置来达到我们满意的效果。这个调像素的过程是让我们抓狂的，因为他没有实用性，我们好不容易写好了一个角签，然而他只能在这个样式或者这个角签内容时是...
CSS：斜角标签
小陈的博客
05-24 2525
前言 斜角标签是前端toC开发常见的场景，其效果图大概如下： 中间的空盒子常为优惠券、商品等卡片，斜角的标签可能是折扣、售罄、补货等，今天就普及一下这类斜角标签的实现方式 思路 主要在卡片的盒子内新建一个长条的标签盒子，通过定位的方式调整位置，然后再通过变形transform: rotate(45deg)，旋转45度角，超出卡片盒子的部分设置overflow:hidden; 代码实现 首先，创建卡片盒子： <div class="card"></div> .card{ w
DIV右上角标签的CSS3实现技巧
TwoBE9876的博客
11-10 1237
我们在写页面中，经常要用到给一个div或其他dom元素的右上角添加一个标签来表示此条目的状态或者特性，今天我们就探讨一下这个标签的实现方式 我们一般要实现这种标签的时候通过用css3的rotate来实现，并且大部分人实现时是通过一像素，一像素的调节标签的偏移位置来达到我们满意的效果。这个调像素的过程是让我们抓狂的，因为他没有实用性，我们好不容易写好了一个角签，然而他只能在这个样式或者这个角签内容时是正常的。 其中用到了translate百分比的特性，他跟margin和padding不同，他的百分比是
css简易制作一个div右上角的标签条
Wline
12-20 6115
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .a{ width:200px; heig...
CSS特效第一弹：右上角tag标志纯代码前端实现（非图片）
最新发布
weixin_46015250的博客
11-11 736
【代码】【无标题】
css简易制作一个div右上角的三角形标签条、角标
qq_37831545的博客
09-17 2928
css简易制作一个div右上角的三角形标签条、角标
纯css在div上添加小三角
qq_43555948的博客
04-21 5988
纯css在div上添加小三角 有些项目中会遇到这样的需求，就是div容器上要突出来一个小三角，如下图 虽然在功能上没啥意义，但是人家UI就是要这个小三角，你能怎么办，咱必须给他整出来！ 我们用伪类和border来画这个小三角。 .box {//首先准备一个div height:100px; width:100px; background: white; position: relative; } .box::before { //这里就是小三角了 content: ""; dis
纯css3实现鼠标悬停背景翻转动画导航
06-12
今天的这款效果，鼠标悬停背景图片翻转，无需js，只要一部分的css3代码即可，其他的都是普通的css2代码 使用方法： 1、将head中的lanrenzhijia.css样式引入到你的网页中 2、将body中的代码部分拷贝到你需要的...
js css3右上角圆形菜单特效.zip
07-11
代码简介：js css3右上角圆形菜单特效是一款圆形导航菜单，鼠标点击圆形图标打开菜单动画特效。
html+css制作div标签增加右上角删除图标的示例代码
11-20
标题中的“html+css制作div标签增加右上角删除图标的示例代码”是指通过HTML和CSS技术，在一个Div元素的右上角添加一个可点击的删除图标。这个功能常见于网页设计中，用于创建具有交互性的用户界面，例如删除按钮...
CSS实现卡片3D翻转效果的示例代码
09-24
本篇文章主要介绍了CSS实现卡片3D翻转效果的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
CSS3右下角悬浮客服菜单代码
04-02
本篇将深入探讨如何利用CSS3实现右下角悬浮客服菜单的功能，以及相关的在线客服功能。 首先，这个“CSS3右下角悬浮客服菜单代码”旨在为用户提供便捷的在线支持途径，通过点击页面右下角的悬浮图标，可以展开一个...
html让div显示在右上角,DIV右上角标签的CSS3实现技巧
weixin_39976951的博客
06-11 5863
我们在写页面中，经常要用到给一个div或其他dom元素的右上角添加一个标签来表示此条目的状态或者特性，今天我们就探讨一下这个标签的实现方式我们一般要实现这种标签的时候通过用css3的rotate来实现，并且大部分人实现时是通过一像素，一像素的调节标签的偏移位置来达到我们满意的效果。这个调像素的过程是让我们抓狂的，因为他没有实用性，我们好不容易写好了一个角签，然而他只能在这个样式或者这个角签内容时是...
使用css斜切边 角 倒切角
qq_40580023的博客
12-03 1万+
HTML 效果图及 css写法 .rectangle{     width: 305px;     height: 75px;     background:              linear-gradient(-135deg, transparent 52px, #ffffff 0) top right;     background-size: 100% 100%; ...
div标签增加右上角删除图标
热门推荐
newsky_heart的博客
03-28 2万+
一、需求描述在Div标签的右上角显示删除图标二、实现方式html、CSS三、参考代码&lt;style&gt;.container{        width:60px;        height:60px;        border: 1px dotted red;        position:relative;}.content{        position:relative;  ...
DIV/CSS：一个贴在左上角的标签
shirenfeigui的专栏
06-11 1万+
标签省着用，贴在左上角就可以了。 怎么贴上去的呢？这就用到position属性了。值relative可以让内层div的位置以外层div的左上角为原点，这样就可以做出相对于外层往左上移动一段距离的标签了。 body,div,li{margin:0; padding:0} #div1{width:200px; height:200px; position:absolu
CSS 在div右上角显示div元素
wmnmtm的专栏
12-31 5212
&lt;style&gt;.main{ width:400px; margin-left:auto; margin-right:auto; margin-top:100px; padding:10px; border:1px solid green; position:relative; }.float_div{ position:absolute; width:10px; height:10px...
解决‘底层的图层经过transform:rotate转换后，覆盖住高图层’的问题
zhl_cafe的博客
06-23 7527
一、问题：          问题背景：在写H5的时候，因为要使z-index:0的红旗这张图片达到飘摇的动效，所以需要加transform:rotateX() rotateY()进行角度旋转转换；          问题出现：动效是有了，但是层级感觉变了，有种变成了z-index：无穷大 的感觉，z-index好像已经失效了。 二、思路：       知道是层级的问题，就找和z-ind
css切除右上角和右下角
07-27
要切除一个元素的右上角和右下角，你可以使用 CSS 的 `border-radius` 属性来控制元素的圆角。通过设置合适的值，你可以实现只有左上角和左下角有圆角的效果。下面是一个示例代码： ```css .element { border-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值