CSS 手动画热销小图标

效果图

HTML 标签

    <div class="main">
      <div class="small">
        <div class="big-area">
          <span>热销</span>
        </div>
        <div class="small-l">

        </div>
        <div class="small-r">

        </div>
      </div>
    </div>

CSS 代码

      html, body {
        margin: 0;
        padding: 0;
      }
      .main {
        width: 200px;
        height: 200px;
        margin: 0 auto;
        border: #000 1px solid;
      }
      .small {
        height: 60px;
        width: 40px;
        margin: 0 auto;
        overflow: hidden;
      }
      .big-area {
        width: 40px;
        height: 40px;
        line-height: 40px;
        background: #000;
        color: #fff;
        text-align: center;
      }
      .small-l {
        width: 0px;
        height: 0px;
        margin: 0 auto;
        border-top: #000 10px solid;
        border-bottom: transparent 10px solid;
        border-left: transparent 10px solid;
        border-right: #000 10px solid;
        display: inline-block;
        float: right;
      }
      .small-r {
        width: 0px;
        height: 0px;
        margin: 0 auto;
        border-top: #000 10px solid;
        border-bottom: transparent 10px solid;
        border-left: #000 10px solid;
        border-right: transparent 10px solid;
        display: inline-block;
        float: right;
      }