溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

CSS怎么繪制圖形

發(fā)布時(shí)間：2022-02-22 15:47:38 來(lái)源：億速云 閱讀：160 作者：iii 欄目：開(kāi)發(fā)技術(shù)

這篇文章主要介紹了CSS怎么繪制圖形的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇CSS怎么繪制圖形文章都會(huì)有所收獲，下面我們一起來(lái)看看吧。

正方形/長(zhǎng)方形

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>w3cschool - 億速云，隨時(shí)隨地學(xué)編程</title>    <style>        .Square{            width:200px;            height: 200px;            background-color: red;        }        .Rectangle{            width:400px;            height: 200px;            background-color: black;            margin-top: 10px;        }    </style></head><body>    <div class="Square"></div>    <div class="Rectangle"></div></body></html>

三角形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>w3cschool - 億速云，隨時(shí)隨地學(xué)編程</title>
    <style>
        /*向下的三角形，則需要設(shè)置為border-top：100px solid red;左右邊不變
        向左的三角形，則需要設(shè)置為border-right：100px soli red;上下邊不變
        向右的三角形，則需要設(shè)置為border-left：100px soli red;上下邊不變*/
    .triangle-up {
        width: 0;
        height: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 100px solid red;
}
    </style>
</head>
<body>
    <div class="triangle-up"></div>
</body>
</html>

橢圓形/圓形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>w3cschool - 億速云，隨時(shí)隨地學(xué)編程</title>
    <style>
    .oval {/*橢圓*/
        width: 200px;
        height: 100px;
        background: red;
        -moz-border-radius: 100px / 50px;
        -webkit-border-radius: 100px / 50px;
        border-radius: 100px / 50px;
    }
    .circle {/*圓形*/
        width: 100px;
        height: 100px;
        background: red;
        -moz-border-radius: 50px;
        -webkit-border-radius: 50px;
        border-radius: 50px;
}
    </style>
</head>
<body>
    <div class="oval"></div>
    <div class="circle"></div>
</body>
</html>

平行四邊形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>w3cschool - 億速云，隨時(shí)隨地學(xué)編程</title>
    <style>
    .parallelogram {/*平行四邊形*/
        width: 150px;
        height: 100px;
        -webkit-transform: skew(20deg);
        -moz-transform: skew(20deg);
        -o-transform: skew(20deg);
        background: red;
        margin-left: 30px;
}
    </style>
</head>
<body>
    <div class="parallelogram"></div>
</body>
</html>

梯形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>w3cschool - 億速云，隨時(shí)隨地學(xué)編程</title>
    <style>
    .trapezoid {/*梯形*/
        border-bottom: 100px solid red;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        height: 0;
        width: 100px;
}
    </style>
</head>
<body>
    <div class="trapezoid"></div>
</body>
</html>

關(guān)于“CSS怎么繪制圖形”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“CSS怎么繪制圖形”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。

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

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

css
AI
助
手