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>
相关推荐
强子感冒了2 小时前
CSS基础学习:CSS选择器与优先级规则
前端·css·学习
layman052815 小时前
webpack5 css-loader:从基础到原理
前端·css·webpack
半桔15 小时前
【前端小站】CSS 样式美学:从基础语法到界面精筑的实战宝典
前端·css·html
_OP_CHEN15 小时前
【前端开发之CSS】(一)初识 CSS:网页化妆术的终极指南,新手也能轻松拿捏页面美化!
前端·css·html·网页开发·样式表·界面美化
啊哈一半醒15 小时前
CSS 主流布局
前端·css·css布局·标准流 浮动 定位·flex grid 响应式布局
PHP武器库15 小时前
ULUI:不止于按钮和菜单,一个专注于“业务组件”的纯 CSS 框架
前端·css
~小仙女~16 小时前
为什么垂直居中比水平居中难?
css·垂直居中
RFCEO21 小时前
前端编程 课程十三、:CSS核心基础1:CSS选择器
前端·css·css基础选择器详细教程·css类选择器使用方法·css类选择器命名规范·css后代选择器·精准选中嵌套元素
肖。35487870941 天前
html选择页最简模板源码,用于集合很多网页!游戏大全数字导航页面,数字选择页制作灵感,已经压缩到最小,现代,讲解。
android·java·javascript·css·html
共享家95272 天前
搭建 AI 聊天机器人:”我的人生我做主“
前端·javascript·css·python·pycharm·html·状态模式