CSS元素角标设置

最新推荐文章于 2024-06-18 16:57:24 发布

iuw...

最新推荐文章于 2024-06-18 16:57:24 发布

阅读量674

点赞数

分类专栏： web 文章标签： css html 前端

本文链接：https://blog.csdn.net/Jimmy12581/article/details/126537884

版权

web 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

实现效果：

代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>元素角标设置</title>
    <style>
      .box {
        width: 100%;
        margin-top: 10px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
      }
      .item {
        width: calc(50% - 30px);
        font-size: 12px;
        background: #f2f2f2;
        text-align: center;
        padding: 8px 5px;
        margin: 5px 10px;
        border-radius: 4px;
        overflow: hidden;
        /* 内容超出不换行 */
        white-space: nowrap; 
        text-overflow: ellipsis;
      }
      .sel {
        color: #4796e3;
        background-color: rgba(57, 125, 234, 0.0745098039215686);
        position: relative;
      }
      /* 实现角标背景 */
      .sel::before {
        position: absolute;
        content: "";
        right: 0px;
        bottom: 0px;
        width: 20px;
        height: 20px;
        clip-path: polygon(20px 20px, 20px 0, 0 0);
        /* 旋转元素90度 */
        transform: rotate(90deg);
        border-top-right-radius: 4px;
        background-color: #4796e3;
      }
      /* 使用div边框实现对号效果 */
      .sel::after {
        position: absolute;
        content: "";
        right: 4px;
        bottom: 3px;
        width: 3px;
        height: 6px;
        border-color: #fff;
        border-style: solid;
        border-width: 0 1px 1px 0;
        /* 旋转元素45度 */
        transform: rotate(45deg);
      }
    </style>
    <script src="./jquery.min.js"></script>
  </head>
  <body>
    <div class="box">
      <div class="item">111111111111111111111111111111111111111111111111111</div>
      <div class="item">22222</div>
      <div class="item">33333</div>
      <div class="item">44444</div>
    </div>

    <script>
      var box = document.querySelector(".box");
      box.addEventListener("click", function boxClick(e) {
        if (e.target.className.indexOf("item") > -1) {
          if (e.target.className.indexOf("sel") > -1) {
            $(e.target).removeClass("sel");
          } else {
            $(e.target).addClass("sel");
          }
        }
      });
    </script>
  </body>
</html>