html5 活动卡片布局

image.png

<style>
    body{
    margin: 0;
    background: #000;
    padding: 20px 0;
}
div{
    width: 80vw;
    min-height: 15vh;
    background: #456789;
    border-radius: 6px;
    margin: 0 auto;
    position: relative;
    border-top: 1px dashed #333;
}
div:first-child{
    border: none;
}

div::before,div::after{
    content: '';
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #000;
    position: absolute;
    z-index: 999;
}
div::before{
    left: -10px;
    top: -10px;
}
div::after{
    right: -10px;
    top: -10px;
}
div:first-child::before,div:first-child::after{
    content: '';
    width: 0;
    height: 0;
}
</style>





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

原文地址：https://www.jianshu.com/p/e83af8f2a24f