问题描述
我需要再次帮助在我的元素上创建有间隙的圆顶。
我想做这样的事情: [带间隙和圆帽的矩形][1] [1]:https://i.stack.imgur.com/O781h.png
经过一些研究和尝试,我最终做到了这一点(例如我的代码)。我对它很满意,但我想像我的例子一样创造更具美感的圆形帽子。谁能帮帮我,先谢谢了。
span {
font-size: 20px;
background: #fff;
position:absolute;
top: -20px;
right: 10px;
left: 10px;
padding:4px;
}
p{
border-radius: 25px;
width: 250px;
height: 150px;
border:10px solid #000;
background-color:white;
position:relative;
padding-top:15px;
}
<body class="container">
<!--///////////////////////////////// début header//////////////////////////// -->
<div id="Box">
<p><span>Title will come here</span></p>
</div>
</body>
解决方法
您可以在线条的末端添加一些 cricles。可能需要稍微调整一下。
span {
font-size: 20px;
background: #fff;
position: absolute;
top: -20px;
right: 10px;
left: 10px;
padding: 4px;
}
p {
border-radius: 25px;
width: 250px;
height: 150px;
border: 10px solid #000;
background-color: white;
position: relative;
padding-top: 15px;
}
p::after {
content: "";
position: absolute;
top: -9.3px;
left: 5px;
width: 10px;
height: 10px;
background: black;
border-radius: 50%;
z-index: 1;
}
p::before {
content: "";
position: absolute;
top: -9.3px;
left: 235px;
width: 10px;
height: 10px;
background: black;
border-radius: 50%;
z-index: 1;
}
<body class="container">
<!--///////////////////////////////// début header//////////////////////////// -->
<div id="box">
<span id="cap"></span>
<p><span>Title will come here</span></p>
</div>
</body>