首页 > Web开发 > 详细

CSS 手动画热销小图标

时间:2018-06-26 00:33:17      阅读:311      评论:0      收藏:0      [点我收藏+]

效果图

技术分享图片

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

CSS 手动画热销小图标

原文:https://www.cnblogs.com/zhourongcode/p/9226704.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!