HTML <div>，像顶部边框一样拼图

Question

我正在开发一个网页。我有一个div，我喜欢它的顶部边框看起来像拼图，像这样： -

我不知道该怎么做。有人可以指导我吗？

Answer 1

为什么不使用：在使用CSS的元素之前将其拉出来？你可以有一个白色背景的DIV然后做这样的事情：

div {
background-color: #fff;
position: relative;
}

div:before {
position: absolute;
top: -10px;
left: 50%; <- You'll need to play with this value a bit more
width: 20px;
height: 20px;
background-color: #fff;
border-radius: 50%;
}