css实现内凹圆

css实现内凹圆

实现效果

html

复制代码
<div id="post-form">
	 <div class="formbox"></div>
	 <div class="rightform"></div>
</div>

css 样式

复制代码
#post-form{
    padding:50px 10px;
    background:#fff;
    margin:30px auto;
    width:90%;
    border-radius:10px;
    position:relative;
}
 .formbox{
      position: absolute;
      top: 50%;
      left:-2px;
      transform: translate(-50%,-50%);
      width: 20px;
      height:20px;
      background:#2EB267;
      z-index:9;
      border-radius:50%;
 }
   .rightform{
        position: absolute;
        top: 50%;
        right:-23px;
        transform: translate(-50%,-50%);
        width: 20px;
        height:20px;
        background:#2EB267;
        z-index:9;
        border-radius:50%;
   }
相关推荐
不吃鱼的羊10 分钟前
DaVinci配置NVM模块
前端·javascript·网络
excel20 分钟前
为什么需要构建工具(Webpack / Vite 的本质)
前端
lang2015092820 分钟前
Java SAX 流式解析全解:从原理到 EasyExcel 实战
java·前端·javascript
Rain50928 分钟前
2.4. PostgreSQL 数据库连接与实战指南
前端·数据库·人工智能·后端·postgresql·数据分析
console.log('npc')28 分钟前
Codex 桌面端接入 Headroom 压缩代理完整教程
前端·vscode
独泪了无痕1 小时前
Vue集成uuid生成唯一标识实践指南
前端·vue.js
yuanyxh9 小时前
Mac 软件推荐
前端·javascript·程序员
万少9 小时前
AtomCode开发微信小程序《谁去呀》 全流程
前端·javascript·后端
某人辛木9 小时前
Web自动化测试
前端·python·pycharm·pytest
Kagol10 小时前
Superpowers GSD gstack AgentSkills深度测评
前端·人工智能