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>
相关推荐
Joker Zxc7 小时前
【前端基础】20、CSS属性——transform、translate、transition
前端·css
面向星辰8 小时前
css其他选择器(精细修饰)
前端·css
宁雨桥8 小时前
从视口到容器:CSS 容器查询完全指南
前端·css
我登哥MVP12 小时前
HTML-CSS-JS-入门学习笔记
javascript·css·笔记·学习·html
西洼工作室1 天前
CSS高效开发三大方向
前端·css
昔人'1 天前
css`font-variant-numeric: tabular-nums` 用来控制数字的样式。
前端·css
不叫猫先生2 天前
中秋连连看小游戏开发完整教程
javascript·css·小游戏·连连看
西洼工作室3 天前
SSE与轮询技术实时对比演示
前端·javascript·css
Dontla3 天前
Tailwind CSS介绍(现代CSS框架,与传统CSS框架Bootstrap对比)Tailwind介绍
前端·css·bootstrap
向上的车轮3 天前
CSS 预处理器:Sass的基本用法、核心特性
css·sass