zoukankan      html  css  js  c++  java
  • css实现角标

    效果图:

     

    简单方式可以使用背景图片,但这里我使用的css来实现,最笨的方式是使用矩形div然后旋转遮挡就可以,

    <div class='checked-item'>
         角标实现
      <div class="replace-item">
        <div class="jiao"></div>
        <div class="desc">换</div>
      </div>
    </div>

    样式

      .checked-item {
        position: relative;
        padding : 7px 10px;
        border : 1px solid #ebebeb;
        text-align : center;
        color : #808080;
        background-color : #fff; overflow: hidden;

        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .replace-item {
        right: 0;
        top: 0;
        position: absolute;
        color: #ffffff;
        font-size: 12px;
      }
      .jiao, .desc {
        position: absolute;
        top:0;
        right: 0;
      }
      .jiao {
         20px;
        height: 37px;
        transform: rotate(-50deg);
        -webkit-transform: rotate(-50deg);
        -moz-transform: rotate(-50deg);
        -ms-transform: rotate(-50deg);;
        top: -15px;
        right: -4px;
        background-color: #ff685d;
        padding:0;
      }
      .desc {
        top: -2px;
      }



  • 相关阅读:
    Spring--AOP
    Database--事务
    Neo4j--UNIQUE约束
    Neo4j--INDEX索引
    排序算法 目录
    数据结构 目录
    设计模式 目录
    建造者模式及应用举例
    模板模式以及应用举例
    真·随笔
  • 原文地址:https://www.cnblogs.com/wind-wang/p/9606566.html
Copyright © 2011-2022 走看看