How to use pseudo elements to realize the bottom boundary with angles in css

This article mainly introduces how css uses pseudo elements to achieve the bottom boundary with an angle. it is introduced in great detail and has a certain reference value. Interested friends must read it!

Pseudo elements achieve angled bottom boundaries (sloped boundaries)

Principle: modify the webkit-transform: skewY property to change the inclination (the same is true of rotation)

.edge-bottom {position: relative; z-index: 1;} .edge-- bottom:after {background: inherit; content:''; display: block; height: 50%; left: 0; position: absolute; right: 0; z-index:-1;} .edge-- bottom:after {bottom: 0;-webkit-transform: skewY (- 1.5deg);-ms-transform: skewY (- 1.5deg) Transform: skewY (- 1.5deg);-webkit-transform-origin: 100%;-ms-transform-origin: 100%; transform-origin: 100%;}

This is all the content of the article "how css uses pseudo elements to achieve angled bottom boundaries". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!