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%;
   }
相关推荐
-seventy-10 分钟前
Ajax 与 Vue 框架应用点——随笔谈
前端
我认不到你26 分钟前
antd proFromSelect 懒加载+模糊查询
前端·javascript·react.js·typescript
集成显卡29 分钟前
axios平替!用浏览器自带的fetch处理AJAX(兼容表单/JSON/文件上传)
前端·ajax·json
焚琴煮鹤的熊熊野火37 分钟前
前端垂直居中的多种实现方式及应用分析
前端
我是苏苏1 小时前
C# Main函数中调用异步方法
前端·javascript·c#
转角羊儿1 小时前
uni-app文章列表制作⑧
前端·javascript·uni-app
大G哥1 小时前
python 数据类型----可变数据类型
linux·服务器·开发语言·前端·python
hong_zc2 小时前
初始 html
前端·html
前端Hardy2 小时前
探索 HTML 和 CSS 实现的 3D 开关按钮
css·3d·html
小小吱2 小时前
HTML动画
前端·html