How to realize Tai Chi effect by Div

This article mainly introduces Div how to achieve tai chi effect, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

Using div+css to realize simple Tai Chi effect

.taiji {border-left: 100px solid white

Border-right: 100px solid black

Box-shadow: 00 5px black;height: 200px

Width: 0 margin: 0 auto

Border-radius: 100pxposition position

.taiji: before {content: ""

Width: 100pxpositional height: 100pxposition: absolute

Top: 0; left:-50px;background-color: black;border-radius:50px

Box-shadow: 0 100px 0 white;}

.taiji: after {content: ""; width: 25pxposition height: 25px

Position: absolute;top: 40pxscape left:-20px

Background-color:white;border-radius: 25px

Box-shadow: 0 100px 0 black;}

Thank you for reading this article carefully. I hope the article "how to achieve the Taiji effect of Div" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!