html实现上角标的效果

Dear 丶 2022-06-15 03:16 402阅读 0赞

注：此效果主要运用了css3中的rotate属性

首先，一起来看一看最终的实现效果![Center][]

好的，那么现在我们来黏贴代码。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>制作角标的方法</title>
        <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
        <style>
              .con{
                height: 250px;
                width: 200px;
                margin: 0 auto;
                overflow: hidden;
                margin-top: 100px;
                position: relative;
                background-color: #4cd964;
              }
          .subscript{
            color: #fff;
            height: 30px;
            width: 100px;
            position: absolute;
            right: -30px;
            text-align: center;
            line-height: 30px;
            font-family: "黑体";
            background-color: #0c60ee;
            -moz-transform:rotate(45deg);
            -webkit-transform:rotate(45deg);
            -o-transform:rotate(45deg);
            -ms-transform:rotate(45deg);
            transform:rotate(45deg);
          }
        </style>
    </head>
    <body>
    <div class="con">
        <div class="subscript">
          角标
        </div>
    </div>
    </body>
    </html>

代码我感觉大部分应该可以看得懂，如果有什么问题的话，欢迎提问

[Center]: /images/20220615/b0ffe7e9881e45fd9ce2859361326091.png

发表评论取消回复

表情：

评论列表（有 0 条评论，402人围观）

还没有评论，来说两句吧...

相关阅读

相关 html实现烟花效果‘

<p>好的，首先，你需要创建一个HTML文件，然后在文件中加入一个HTML元素，这样你就可以在其中放置烟花效果。</p> <p>接下来，使用HTML中的canv

川长思鸟来/ 2024年03月27日 18:03/ 0 赞/ 47 阅读

相关 html如何实现商标 TM 角标

1、实现代码如下 <div>小李™</div> 小李™ 更多前端面试题请关注公众号——>面试题库即可查看1000+条面试题 ![在这里插入图片描述][d21

我会带着你远行/ 2022年09月14日 01:49/ 0 赞/ 125 阅读

相关 MUI-badge数字角标的基本使用

badge（数字角标）数字角标一般和其它控件（列表、9宫格、选项卡等）配合使用，用于进行数量提示。角标的核心类是`.mui-badge`，默认为实心灰色背景；同时，m

深藏阁楼爱情的钟/ 2022年08月09日 12:44/ 0 赞/ 142 阅读

相关 html实现上角标的效果

注：此效果主要运用了css3中的rotate属性首先，一起来看一看最终的实现效果![Center][] 好的，那么现在我们来黏贴代码。 <!DOCTYPE ht

Dear 丶/ 2022年06月15日 03:16/ 0 赞/ 403 阅读

相关【html】在消息按钮上增加数量角标

html代码： <a onclick="goMessage();" style="width: 60px;height: 100%;color: white;back

怼烎@/ 2022年06月15日 01:13/ 0 赞/ 236 阅读

相关 html实现点赞效果

源码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

骑猪看日落/ 2022年05月10日 19:42/ 9 赞/ 518 阅读

相关 HTML + JS实现万年历效果

实现的主要功能： 1. 点击实现日历样式的改变 2. 实现下一次点击时，上一次点击改变的样式恢复原状（核心） 3. 实现点击日历时，在最下方输出信息指定信息（注意：并不

末蓝、/ 2022年02月26日 06:49/ 0 赞/ 539 阅读

相关什么是标的

标的（法律术语） [标的][Link 1]（注音：biāo dì），指[合同][Link 2]的双方[当事人][Link 3]之间存在的[权利][Link

曾经终败给现在/ 2022年01月09日 05:15/ 0 赞/ 281 阅读

相关 AGC033 D~F——[ 值放到角标的DP ][ 思路+DP ][ 思路 ]

地址：[https://atcoder.jp/contests/agc033/][https_atcoder.jp_contests_agc033] D Complexity

偏执的太偏执、/ 2021年12月20日 20:07/ 0 赞/ 158 阅读

相关 Html左上角图标

<link rel="shortcut icon" href="http://pic.crsky.com/uploadfiles/201806/201806131125

灰太狼/ 2021年05月22日 20:36/ 0 赞/ 391 阅读