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>
相关推荐
yqcoder1 小时前
CSS 外边距重叠(Margin Collapsing):现象、原理与完美解决方案
前端·css
山楂树の2 小时前
图像标注大坑:img图片 + Canvas 叠加标注,同步放大后标注位置偏移、对不齐?详解修复方案及亚像素处理原理
前端·css·学习·canva可画
JYeontu7 小时前
照片墙太死板?做一个会随风摇摆的绳串图片交互效果
前端·javascript·css
吹个口哨写代码7 小时前
小程序图片不显示,直接访问显示,头部配置问题
javascript·css·nginx
遇见~未来8 小时前
第一篇_认识CSS_风格的起点
前端·css
遇见~未来8 小时前
第二篇_CSS核心_盒子_布局_视觉
前端·css
林恒smileZAZ8 小时前
宇宙画布:纯 CSS+JS 实现交互式深空艺术
前端·javascript·css
ZC跨境爬虫9 小时前
跟着 MDN 学 HTML day_5:(原生table表格语义化搭建+CSS轻量化交互美化全实战)
前端·css·ui·html
里欧跑得慢18 小时前
15. Web可访问性最佳实践:让每个用户都能平等访问
前端·css·flutter·web
心中无石马1 天前
uniapp引入tailwindcss4.x
前端·css·uni-app