用flex布局做一个简单的物流状态线

2017-09-13 18:34 出处:segmentfault 人气: 评论(0

如图效果

html

<div class="wrap">
    <div class="circle"><span>已付款</span></div>
    <div class="circle"><span>已发货</span></div>
    <div class="circle"><span>配送中</span></div>
    <div class="circle"><span>已收货</span></div>
</div>

css

         * {
            margin: 0;
            padding: 0;
        }
        .circle{
            position: relative;
            z-index: 2;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            border: 1px solid red;
            box-sizing: border-box;            
            background: radial-gradient(red 50% , white 50%);
            white-space: nowrap;
        }
        .wrap{
            position: relative;
            margin: 100px auto 0;
            display: flex;
            width: 80%;
            justify-content: space-between;    
        }
        .wrap:before{
            position: absolute;
            top:50%;
            left: 0;
            content: '';
            display: block;
            width: 100%;
            height: 1px;
            background: grey;
           
        }
        span{
            position: absolute;
            top:-20px;
            left: -10px;
            font-size: 12px;
            color: grey;
        }
本文标签: html5csshtml

相关文章

网站内容来源于互联网,仅供用于技术学习,请遵循相关法律 规,如有侵权,请联系管理员删除

Copyright © 2002-2017 JISHUX. 技术栈 版权所有

京ICP备15061484号-3