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

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

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


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

复制代码



网址演示:https://www.qqq0.com/jquery/css3/jiaobiao.html

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则