css矩形实现底部圆弧背景

最新推荐文章于 2025-01-09 08:20:02 发布

180M

最新推荐文章于 2025-01-09 08:20:02 发布

阅读量1k

点赞数 1

分类专栏：自学记录_css 文章标签： css css3 html

本文链接：https://blog.youkuaiyun.com/qq1047861073/article/details/111467592

版权

自学记录_css 专栏收录该内容

1 篇文章

订阅专栏

页面布局如下：

<view class="box">
	我是页面内容
</view>
//圆弧部分的高度是由box的高度决定的

css代码如下所示：

.box {
  position: relative;
  //圆弧高度决定于box高度
  height: 300px;
  //修剪多余内容，不会出现滚动条
  overflow: hidden;
}

.box::after {
  content: '';
  width: 140%;
  height: 100%;
  position: absolute;
  left: -20%;
  top: 0;
  z-index: -1;
  border-radius: 0 0 50% 50%;
  background: #2ea7e0;
}