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%;
   }
相关推荐
NEXT067 小时前
TCP 与 UDP 核心差异及面试高分指南
前端·网络协议·面试
qq_24218863327 小时前
HTML 全屏烟花网页
前端·html
码云数智-大飞7 小时前
前端性能优化全链路实战:从加载速度到渲染效率的极致提速方案
前端·性能优化
锅包一切7 小时前
【蓝桥杯JavaScript基础入门】一、JavaScript基础
开发语言·前端·javascript·蓝桥杯
NEXT067 小时前
HTTP 协议演进史:从 1.0 到 2.0
前端·网络协议·面试
好学且牛逼的马8 小时前
从“混沌初开”到“有序统一”:Java集合框架发展历程与核心知识点详解
前端·数据库·python
嵌入式×边缘AI:打怪升级日志8 小时前
编写Bootloader实现下载功能
java·前端·网络
恋猫de小郭9 小时前
Flutter 设计包解耦新进展,material_ui 和 cupertino_ui 发布预告
android·前端·flutter
linux_cfan9 小时前
[2026深度评测] 打造“抖音级”丝滑体验:Web直播播放器选型与低延迟实践
前端·javascript·html5
天天向上的鹿茸9 小时前
前端适配方案
前端·javascript