<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div class="top-box"> <div class="top-box-inner"></div> </div> </body> <style> * { padding: 0; margin: 0; } .top-box { overflow: hidden; /* 因为内部伪元素width:140%,必然超出屏幕，所以要溢出隐藏 */ } .top-box-inner { position: relative; width: 100%; height: 200px; /* 定位 */ } .top-box-inner:after { /* 这个伪类的作用就是一个圆弧的背景色 */ width: 140%; height: 200px; position: absolute; left: -20%; /* 之所以left:20%,是因为width:140%，宝贝可以是是别的值，例如width:160%，那么left:30%才能水平居中，可以发现规律的 */ top: 0; z-index: -1; /*层叠顺序，最底层显示*/ content: ''; border-radius: 0 0 50% 50%; /*分别对应 左上 右上 右下 左下*/ background-color: #000000; /* 将这个伪类水平居中 */ } </style> </html>
