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

最新推荐文章于 2023-07-15 15:15:44 发布
最新推荐文章于 2023-07-15 15:15:44 发布
阅读量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右上角标签的CSS3实现技巧
TwoBE9876的博客
11-10 1237
我们在写页面中，经常要用到给一个div或其他dom元素的右上角添加一个标签来表示此条目的状态或者特性，今天我们就探讨一下这个标签的实现方式 我们一般要实现这种标签的时候通过用css3的rotate来实现，并且大部分人实现时是通过一像素，一像素的调节标签的偏移位置来达到我们满意的效果。这个调像素的过程是让我们抓狂的，因为他没有实用性，我们好不容易写好了一个角签，然而他只能在这个样式或者这个角签内容时是正常的。 其中用到了translate百分比的特性，他跟margin和padding不同，他的百分比是
html 按钮的滑动效果,css3点击按钮特效 css3怎样让按钮从右上角滑动出来
weixin_39645003的博客
06-03 423
html5 svg和css3炫酷鼠标点击按钮特效怎么用HTML结构 该鼠标点击按钮特效中每一个可点击的元素都是一个按钮 CSS样式 以下是该css3点击按钮特效的通用CSS样式： 插件中通过在点击按钮时使用javascript来为它添加相应的动画CLASS来执行动画效果： 上面的CSS代码可以生成如下图的动画效果：.btn { border-style: solid; box-sizing: bo...
【css】用css样式快速写右上角badge徽标，颜色设置为渐变色
向来缘浅，奈何情深
07-15 1761
如果不生效的话，要注意一点，子节点用absolute定位的时候，父节点必须要用position:relative定位，否则absolute会层层往前找，直到找到一个relative的父节点，按照该节点进行定位。首先是dom代码：需要两个view或者div，public-badge是“已公开”那个矩形，show-signal是右边那个下三角，也就是阴影部分，这样看起来比较有立体感。博主会一直更新在真实项目中遇到的问题，请多关注。先看效果展示，已公开显示在图片卡片的右上角。
图片翻转和右上角提示综合展示
weixin_30767835的博客
02-28 49
html代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head&...
css 右上角 翻开动画_CSS3 transition动画、transform变换、animation动画
weixin_39967120的博客
12-19 389
一、CSS3 transition动画transition可以实现动态效果，实际上是一定时间之内，一组css属性变换到另一组属性的动画展示过程。属性参数：1、transition-property 设置过渡的属性，比如：width height background-color2、transition-duration 设置过渡的时间，比如：1s 500ms3、transition-timing-...
css简易制作一个div右上角的标签条
Wline
12-20 6115
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .a{ width:200px; heig...
纯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右下角悬浮客服菜单代码”旨在为用户提供便捷的在线支持途径，通过点击页面右下角的悬浮图标，可以展开一个...
css简易制作一个div右上角的三角形标签条、角标
qq_37831545的博客
09-17 2929
css简易制作一个div右上角的三角形标签条、角标
div标签加css,DIV右上角标签的CSS3实现技巧
weixin_29840475的博客
08-03 601
我们在写页面中，经常要用到给一个div或其他dom元素的右上角添加一个标签来表示此条目的状态或者特性，今天我们就探讨一下这个标签的实现方式我们一般要实现这种标签的时候通过用css3的rotate来实现，并且大部分人实现时是通过一像素，一像素的调节标签的偏移位置来达到我们满意的效果。这个调像素的过程是让我们抓狂的，因为他没有实用性，我们好不容易写好了一个角签，然而他只能在这个样式或者这个角签内容时是...
纯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
CSS：斜角标签
小陈的博客
05-24 2525
前言 斜角标签是前端toC开发常见的场景，其效果图大概如下： 中间的空盒子常为优惠券、商品等卡片，斜角的标签可能是折扣、售罄、补货等，今天就普及一下这类斜角标签的实现方式 思路 主要在卡片的盒子内新建一个长条的标签盒子，通过定位的方式调整位置，然后再通过变形transform: rotate(45deg)，旋转45度角，超出卡片盒子的部分设置overflow:hidden; 代码实现 首先，创建卡片盒子： <div class="card"></div> .card{ w
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切除右上角和右下角
最新发布
07-27
要切除一个元素的右上角和右下角，你可以使用 CSS 的 `border-radius` 属性来控制元素的圆角。通过设置合适的值，你可以实现只有左上角和左下角有圆角的效果。下面是一个示例代码： ```css .element { border-radius: 0 0 10px 10px; } ``` 在这个例子中，`border-radius` 属性的值表示四个角的圆角半径，按顺序分别对应左上、右上、右下和左下四个角。通过将右上角和右下角的半径设为 0，就可以实现切除右上角和右下角的效果。 你可以根据需要调整 `border-radius` 的值来达到想要的效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值