CSS绘制圆弧

css绘制如图的圆弧:

这种矩形+弧形的效果中,弧形的效果一般是由一条曲线拉伸出来的,这条曲线往往是属于一个椭圆的,所以可以绘制一个椭圆,截取部分可视区域实现效果。

html 复制代码
  <style>
.wrapper{
  width: 400px;
  height: 600px;
  border: 2px solid saddlebrown;
  position: relative;
  overflow: hidden;
}

.arc-continer{
  width: 100%;
  /* 高度设置为 圆弧形状整体高度 */
  height: 259px;
  background-color: transparent;
  position: relative;
}

/* 绘制椭圆 :长半轴为容器宽度*2左右,短半轴为容器宽度*1 左右 -- 可以根据需要进行微调*/
.arc-continer::after{
  content: '';
  width: 200%;
  height:400px;
  background-color: aqua;
  position: absolute;
  /* 绘制为椭圆 */
  border-radius: 100% /100%;
  /* top 为  椭圆高度 - arc-continer高度*/
  top: -141px;
  left: 50%;
  transform: translateX(-50%);
}
  </style>
</head>

<body>
  <div class="wrapper" id="wrap">
    <div class="arc-continer" id="continer">
    </div>
  </div>
</body>
相关推荐
jnene18 小时前
html 时间、价格筛选样式处理
前端·css·html
用户0595401744621 小时前
Redis 缓存过期不一致踩坑实录:一个 bug 让我排查了 3 小时,最终用 Pytest 自动化堵上漏洞
前端·css
神明不懂浪漫1 天前
【第三章】CSS(一)——基础选择器、CSS的属性
前端·css·html·css3
用户059540174461 天前
localStorage清除策略踩坑实录:一个过期的token让我排查了3小时
前端·css
#麻辣小龙虾#1 天前
js实现视频播放画中画模式
javascript·css·音视频
低保和光头哪个先来1 天前
聊聊 CSS 编译和 scoped 实现
前端·css·vue.js
在逃花果山的小松2 天前
CSS 调试头大报错难查?ChatGPT 一键定位样式问题并给出修复方案
css
编程技术手记2 天前
Vue Scoped CSS 与动态创建 DOM 的兼容性问题
前端·css·vue.js
用户059540174462 天前
LangChain 记忆模块踩坑实录:靠自动化测试,我把上下文丢失率从 30% 降到 0
前端·css
雨翼轻尘2 天前
03_HTML进阶标签与CSS入门
前端·css·html·入门·进阶标签