Bottom arc
Many pages have an arc design at the bottom. If you use a picture, you need to load an extra picture, which is a bit troublesome. In fact, as long as you use the after pseudo-class of css, you can simply realize the arc. Don't talk nonsense, just upload the code directly
html:
<div class="top"></div >
css:
.top {
position: relative;
width: 100%;
height: 200px;
}
.top:after {
width: 180%;
height: 200px;
position: absolute;
left: -40%;
top: 0;
z-index: -1;
content: '';
border-radius: 0 0 50% 50%;
background: rgb(71, 71, 245);
}
First position the element itself as relative, set content: '' in the pseudo-class, and position it as absolute, then set the left and top values, and then adjust the radian by changing the width and left. The width needs to be greater than 100%, set left to (100%-width)/2, then the closer the width is to 100%, the larger the arc, which is quite convenient.
Because most of the bottom arcs are used for the background, in practical application, you only need to put an absolute positioning container outside, which is simple and practical.