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;
      }



  • 相关阅读:
    angularjs里对JS的lowercase和uppercase的完善
    UVA
    UVA
    MySQL 8.0X的安装与卸载命令
    回文树(模板+例题)
    UESTC
    UVALive
    BZOJ
    ACM-ICPC 2018 南京赛区网络预赛 I Skr (马拉车+hash去重)或(回文树)
    ACM-ICPC 2018 南京赛区网络预赛 E AC Challenge(状压dp)
  • 原文地址:https://www.cnblogs.com/wind-wang/p/9606566.html
Copyright © 2011-2022 走看看