Div如何實(shí)現(xiàn)太極效果

發(fā)布時間：2022-02-28 15:22:13 來源：億速云閱讀：116 作者：小新欄目：web開發(fā)

這篇文章主要介紹了Div如何實(shí)現(xiàn)太極效果，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

利用div+css實(shí)現(xiàn)簡單的太極效果

<style>

.taiji{border-left: 100px solid white;

border-right: 100px solid black;

box-shadow: 0 0 5px black;height: 200px;

width: 0;margin: 0 auto;

border-radius: 100px;position:relative;}

.taiji:before{content: "";

width: 100px;height: 100px;position: absolute;

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

box-shadow: 0 100px 0 white;}

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

position: absolute;top: 40px;left: -20px;

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

box-shadow: 0 100px 0 black;}

</style>

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“Div如何實(shí)現(xiàn)太極效果”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

向AI問一下細(xì)節(jié)

猜你喜歡