如何解决如何向矩形元素 CSS
我需要再次帮助在我的元素上创建有间隙的圆顶。
我想做这样的事情: [带间隙和圆帽的矩形][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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。