如何使用CSS來創(chuàng)建平面圖形代碼

發(fā)布時(shí)間：2022-02-24 13:58:17 來源：億速云閱讀：182 作者：小新欄目：web開發(fā)

小編給大家分享一下如何使用CSS來創(chuàng)建平面圖形代碼，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

1.矩形

.rectangle {

width: 250px;

height: 150px;

background-color: #6DC75F;

}

2.三角形

.triangleUp {

border-left: 75px solid transparent;

border-right: 75px solid transparent;

border-bottom: 150px solid #6DC75F;

width: 0;

height: 0;

}

3.橢圓形

.oval {

width: 300px;

height: 150px;

background: #6DC75F;

-moz-border-radius: 150px / 75px;

-webkit-border-radius: 150px / 75px;

border-radius: 150px / 75px;

}

4.月牙形

.moon {

width: 150px;

height: 150px;

border-radius: 50%;

box-shadow: 15px 15px 0 0 green;

}

5.樹葉

.leaf {

border-radius: 5px 300px 3px 300px;

background: #6DC75F;

width: 150px;

height: 150px;

}

以上是“如何使用CSS來創(chuàng)建平面圖形代碼”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

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

猜你喜歡