In the implementation of various pages with distinctive UI, we sometimes encounter with the implementation of an arc, and how to achieve such an arc? With pictures? This may seem impractical, since it would be loading an extra image for no reason. Here’s how to use CSS after pseudo-classes to implement arcs.
Write the element first, then set the style and pseudo-class style for the element
For example, for the pure_top element (which is a view because it is a small program, h5 is also implemented), I set the style as follows:
.pure_top {
width: 100%;
height: 100px;
position: relative;
z-index: -1;
overflow: hidden;
}
.pure_top::after {
content: ”;
width: 140%;
height: 100px;
position: absolute;
left: -20%;
top: 0;
z-index: -1;
border-radius: 0 0 50% 50%;
background: #1496f1;
}
How to append after the element, of course, the element itself is positioned as relative, pseudo class set content: “”, and relative position is absolute, then set the left and top values, so that the pseudo class element position is reasonable.
Note here that I set the z-index value to -1 because arcs are used as background images and all levels are naturally lower.
Author: grain, first link: www.jianshu.com/p/e1ea2ed65… Source: Jane Book