css - 如何在css中制作这个点菜单？

Question

我想用点制作菜单按钮：

这是我的按钮 css：

.popup-btn
  height: 35px
  width: 35px
  border-radius: 50%
  background: gray

谢谢

标签： css

Answer 1

您可以使用box-shadow和Pseudo-elements

div{
  width: 32px;
  height: 32px;
  background: black;
  margin: 20px auto;
  border-radius: 50%;
  position:relative;
}
div:before{
    content: "";
    position: absolute;
    left: 50%;
    top: 6px;
    margin-left: -2px;
    background: hsl(0, 0%, 100%);
    border-radius: 50%;
    width: 4px;
    height: 4px;
    box-shadow: 0px 8px white, 0px 16px white;
}

<div></div>