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%;
   }
相关推荐
用户4099322502127 分钟前
Vue3响应式系统的底层原理与实践要点你真的懂吗?
前端·ai编程·trae
qq_4798754322 分钟前
RVO和移动语义
前端·算法
加菲喵23 分钟前
深度解析:在vue3中使用自定义Hooks
前端
hxmmm38 分钟前
js中生成器和迭代器
前端
黄交大彭于晏1 小时前
UniApp 全局通知功能实现
前端·vue.js·uni-app
sTone873751 小时前
Android核心概念(一)minSdkVersion targetSdkVersion compileSdkVersion
android·前端
林太白2 小时前
八大数据结构
前端·后端·算法
一 乐2 小时前
流浪动物救助|流浪猫狗救助|基于Springboot+vue的流浪猫狗救助平台设计与实现(源码+数据库+文档)
java·前端·数据库·vue.js·spring boot·毕设
火星数据-Tina2 小时前
Python + WebSocket 实现实时体育比分系统(含数据库设计与前端演示)
开发语言·前端
国思RDIF框架2 小时前
国思RDIF低代码快速开发框架 v6.2.2版本发布
前端·vue.js·后端