html实现上角标的效果

最新推荐文章于 2025-06-18 13:02:33 发布

自由的小白

最新推荐文章于 2025-06-18 13:02:33 发布

阅读量2.1w

点赞数 9

CC 4.0 BY-SA版权

分类专栏： # HTML 文章标签： html css3 角标

本文链接：https://blog.youkuaiyun.com/zzzzlei123123123/article/details/72628233

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

首先，一起来看一看最终的实现效果

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

<!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:rot