移动端样式小技巧（1）——角标的实现

参考了http://mp.weixin.qq.com/s/CFUn73w3s6Uc8fATZYJE_A 所写的角标的实现，以下是我自己的写法同样能够达到效果。图一是.top-container未加overflow: hidden;的样子；图二是最终效果图。

html：

<div class="container">
    <p class="top-container">
      <span class="top-word">跟团游</span>
      <span class="triangle"></span>
    </p>
    <img class="pic" src="img/scenic.jpg" alt="">
    <p class="bottom-word">
      上海出发世纪东方卡就是看到雷锋
    </p>
</div>

css：

body,
  p {
    padding: 0;
    margin: 0;
  }

  .container {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 140px;
  }

  .pic {
    display: block;
    width: 100%;
    height: auto;
  }

  .top-container {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 999;
    display: flex;
    height: 20px;
    /*font-size: 0;原本是为了解决间隙问题；因为有了display: flex;这个就不需要了；*/
    overflow: hidden;
  }

  .top-word {
    height: 20px;
    line-height: 20px;
    padding-left: 10px;
    overflow: hidden;
    background-color: #ff0;
    font-size: 10px;
    text-align: center;
    -webkit-line-clamp: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .triangle {
    display: inline-block;
    /* 控制宽高为0，用border宽度撑出一个三角形 */
    width: 0;
    height: 0;
    border-left: 8px solid #ff0;
    border-top: 20px solid #ff0;
    border-right: 8px solid transparent;
    border-bottom: 20px solid transparent;
  }

  .bottom-word {
    overflow: hidden;
    width: 100%;
    font-size: 10px;
    background-color: #999;
    padding: 10px 0;
    text-align: center;
    -webkit-line-clamp: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
  }