html+css做的丝带标签

先上效果:

html+css做的丝带标签

HTML:

  <div class="tag">

    <div class="tag-box">

      <div class="tag-content-box">

        <div class="tag-content">

          <span class="tag-content-line"></span>

          <span class="tag-content-text"> 2016.05.24 </span>

        </div>
        <div class="tag-tail top"></div>

        <div class="tag-tail bottom"></div>

        <div class="tag-tail below"></div>

      </div>

    </div>

  </div>

CSS:

  .tag {

      width: 100%;

      border-right: 1px solid #DDD;

      -moz-border-radius: 4px 0px 0px 4px;

      -webkit-border-radius: 4px 0px 0px 4px;

      border-radius: 4px 0px 0px 4px;

      float: left;

      clear: both;

      margin: 30px 0;

    }

  .tag-box {

      width: 100%;

      height: 50px;

      position: relative

    }

  .tag-content-box {

      position: absolute;

      color: #792f2f;

      top: 16px;

      left: 6px;

      border-left: solid 6px #f0807b;

    }

  .tag-content {

      font-size: 14px;

      line-height: 20px;

      height: 20px;

      padding: 5px 15px 5px 17px;

      color: #ffffff!important;

      background: rgba(255, 126, 121, 0.5);

    }

  .tag-content-line {

      border-left: solid 1px #fff;

      position: absolute;

      padding: 100% 0;

      left: 0;

      top: 0;

    }

  .tag-content-text {

      text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.59);

    }

  .tag-tail {

      width: 0;

      height: 0;

      border-left: 16px solid rgba(240, 128, 123, 0.74);

      border-right: 0 none;

      position: absolute;

      right: -14px;

      border-left-color: rgba(240, 128, 123, 0.74);

    }

  .tag-tail.top {

      border-top: 0 solid transparent;

      border-bottom: 16px solid transparent;

      top: 0;

    }

  .tag-tail.bottom {

      border-top: 16px solid transparent;

      border-bottom: 0 solid transparent;

      bottom: 0;

    }

  .tag-tail.below {

      border-top: 0px solid transparent;

      border-bottom: 10px solid transparent;

      border-left: 0px solid transparent;

      border-right: 6px solid #d15952;

      top: 100%;

      left: -6px;

    }

上一篇:centOS升级python3.5


下一篇:第二讲shiro异常及执行流程