css 实现弧形背景

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接: https://blog.csdn.net/weixin_42301962/article/details/102744601
.pure_top {
 width: 100%;
  height: 100px;
  position: relative;
  z-index: 0;
  overflow: hidden;
}

.pure_top::after {
  content: '';
  width: 120%;
  height: 100px;
  position: absolute;
  left: -10%;     //椭圆左边隐藏10%,右边隐藏10%
  top: 0;
  border-radius: 0 0 50% 50%;  //左上角,右上角,右下角,左下角
  background: #1496f1;
}

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_42301962/article/details/102744601