用css畫簡單的圖形

2023-12-16    分類： 網(wǎng)站建設(shè)

今天，我們要學(xué)習(xí)如何使用簡單的CSS來創(chuàng)建不同類型的平面圖形。

使用代碼

矩形

.rectangle { width: 250px; height: 150px; background-color: #6DC75F; }

<div></div>

三角形

.triangleUp { border-left: 75px solid transparent; border-right: 75px solid transparent; border-bottom: 150px solid #6DC75F; width: 0; height: 0; }

<div class="triangleUp"></div>

橢圓形

.oval { width: 300px; height: 150px; background: #6DC75F; -moz-border-radius: 150px / 75px; -webkit-border-radius: 150px / 75px; border-radius: 150px / 75px; }

<div class="oval"></div>

月牙形

.moon { width: 150px; height: 150px; border-radius: 50%; box-shadow: 15px 15px 0 0 green; }

<div class="moon"></div>

樹葉

.leaf { border-radius: 5px 300px 3px 300px; background: #6DC75F; width: 150px; height: 150px; }

<div class="leaf"></div>

CSS能讓你完成很多令人驚艷的事情…

本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計制作公司-創(chuàng)新互聯(lián)成都公司！

新聞標(biāo)題：用css畫簡單的圖形
文章路徑：http://www.muchs.cn/news32/308882.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計、域名注冊、全網(wǎng)營銷推廣、定制開發(fā)、靜態(tài)網(wǎng)站、網(wǎng)站排名

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

成都網(wǎng)頁設(shè)計公司