css实现排序升降图标

最新推荐文章于 2025-06-19 10:13:31 发布

转载最新推荐文章于 2025-06-19 10:13:31 发布 · 2.1k 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zxk5625/p/9405370.html

文章标签：

#javascript #数据库 #ui #ViewUI

效果图:

code:


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

  <style type="text/css">


    .on {
      border-bottom: 2px solid #e61773;
      width: 150px;
      height: 40px;
      display: table-cell;
      position: relative;
    }

    .on a {
      display: block;
      overflow: hidden;
      width: 100%;
      height: 30px;
      line-height: 30px;
      text-align: center;
      color: #5e5e5e;
    }

    .angle_top {
      content: '';
      width: 0;
      height: 0;
      display: block;
      border-style: solid;
      border-width: 0 6px 6px;
      border-color: transparent transparent #5e5e5e;
      position: absolute;
      transform: rotate(180deg);
      bottom: 14px;
      right: 17px;
    }

    .angle_bottom {
      content: '';
      width: 0;
      height: 0;
      display: block;
      border-style: solid;
      border-width: 0 6px 6px;
      border-color: transparent transparent #5e5e5e;
      position: absolute;
      top: 10px;
      right: 17px;
    }
  </style>
</head>
<body>

<div class="on">
  <a href="javascript:void(0)" data-category="price" data-orderby="asc" class="js_category">价格
    <i class="angle_top"></i>
    <i class="angle_bottom"></i>
  </a>
</div>
</body>
</html>