css实现底部圆弧

原创已于 2022-06-29 11:15:38 修改 · 7k 阅读

17 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css #前端 #javascript

收录于

于 2020-07-30 16:26:49 首次发布

HTML+CSS 专栏收录该内容

26 篇文章

订阅专栏

本文介绍了一种使用CSS实现带有圆弧背景的页面布局方法。通过设置相对定位及伪元素，结合特定的border-radius属性，可以创建出美观且响应式的页面设计。

页面布局如下：

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

css部分代码如下所示：

.box {
    overflow: hidden;
    /* overflow: hidden;不加此属性会导致移动端出现横向滚动条 */
    position: relative;
    height: 160px;
}

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

最终效果如图：
在这里插入图片描述