设为首页收藏本站手机版
开启辅助访问 切换到窄版
搜索
无题资源网»论坛 › 网页&编程资源 › 网页及素材 › html5+css3中的rotate的属性 实现网 页上角标的效果 ...

html5+css3中的rotate的属性 实现网 页上角标的效果

[复制链接]
查看1762 | 回复0 | 2019-10-15 19:34:51 | 显示全部楼层 |阅读模式
本帖最后由 ℡淺笑如夏 于 2019-10-15 19:37 编辑

html5+css3中的rotate的属性 实现网 页上角标的效果
001.png


  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>制作角标的方法wuti5.com</title>
  7.     <style>
  8.           .con{
  9.             height: 250px;
  10.             width: 200px;
  11.             margin: 0 auto;
  12.             overflow: hidden;
  13.             margin-top: 100px;
  14.             position: relative;
  15.             background-color: #4cd964;
  16.           }
  17.       .subscript{
  18.         color: #fff;
  19.         height: 30px;
  20.         width: 100px;
  21.         position: absolute;
  22.         right: -30px;
  23.         text-align: center;
  24.         line-height: 30px;
  25.         font-family: "黑体";
  26.         background-color: #0c60ee;
  27.         -moz-transform:rotate(45deg);
  28.         -webkit-transform:rotate(45deg);
  29.         -o-transform:rotate(45deg);
  30.         -ms-transform:rotate(45deg);
  31.         transform:rotate(45deg);
  32.       }
  33.     </style>
  34. </head>
  35. <body>
  36. <div class="con">
  37.     <div class="subscript">
  38.       角标
  39.     </div>
  40. </div>
  41. </body>
  42. </html>

复制代码



网址演示：https://wuti5.com/jquery/css3/jiaobiao.html

回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

℡淺笑如夏

741

主题

284

回帖

1026

积分

三品中书

积分
1026
回复楼主 返回列表