效果展示
先看图，左上角OSX风格的圆点
我的实现方法
按照我之前的习惯，我会在div中放入一个span用作钩子，如下HTML结构：
然后写入如下CSS：.box{ position: relative; padding:40px 20px 20px;}
.box>span,.box>span::before,.box>span::after{
position: absolute;
left:10px;
top:0px;
content:'';
display: inline-block;
width:10px;
height: 10px;
border-radius: 50%;
background: #fc625d;
}
.box>span::before{
left:15px;
background-color: #fdbc40;
}
.box>span::after{
left:30px;
background-color: #35cd4b;
}
效果实现了，多用了一个span标签，好像也没什么问题。
技术流这样做
这两天搞博客，学习了大神的写法。巧用boxshow属性，一行代码解决。
上代码：
.box{ position: relative; padding:40px 20px 20px;}
.box::before {
content: '';
position: absolute;
-webkit-border-radius: 50%;
border-radius: 50%;
background: #fc625d;
width: 12px;
height: 12px;
left: 12px;
-webkit-box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
z-index: 2;
}