css锯齿边框圆点,CSS实现OSX风格的三个圆点

效果展示

先看图，左上角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;

}