Cara membuat trapezoid bersudut tegak dalam css-tutorial css-php.cn

Cara membuat trapezoid bersudut tegak dalam css

WBOY

Lepaskan： 2021-12-03 17:09:18

asal

8244 orang telah melayarinya

Dalam CSS, anda boleh menggunakan atribut sempadan untuk membuat trapezoid bersudut tegak Sintaks ialah "elemen {sempadan: 0px pepejal lutsinar; atas sempadan: tinggi trapezoid warna pepejal; sempadan-kiri: panjang trapezoid. pepejal lutsinar}".

Cara membuat trapezoid bersudut tegak dalam css

Persekitaran pengendalian tutorial ini: sistem Windows 10, versi CSS3&&HTML5, komputer Dell G3.

Cara membuat trapezoid bersudut tegak dalam css

Dalam css, anda boleh menetapkan saiz sempadan elemen kosong kepada 0 dahulu dan warna kepada telus, dan kemudian Tetapkan saiz sempadan satu sisi kepada ketinggian trapezoid, dan tetapkan warna sempadan kepada warna trapezoid.

Atribut sempadan perlu digunakan Contohnya adalah seperti berikut:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<div class=&#39;ti&#39;><div>
<style>
.ti {
    height:100px;
width:100px;
border:0px solid transparent;
border-top:60px solid #000;
        }
</style>
</body>
</html>

Salin selepas log masuk

Hasil keluaran:

Cara membuat trapezoid bersudut tegak dalam css

Kemudian berikan sempadan yang telah menetapkan warna Hanya tetapkan nilai ketebalan sempadan di sebelahnya Tidak perlu menetapkan warna atau warna lutsinar Contohnya seperti berikut:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<div class=&#39;ti&#39;><div>
<style>
.ti {
    height:100px;
width:100px;
border:0px solid transparent;
border-top:60px solid #000;
border-left:50px solid transparent;
        }
</style>
</body>
</html>

Salin selepas log masuk

Hasil keluaran:

Cara membuat trapezoid bersudut tegak dalam css

( Mempelajari perkongsian video: tutorial video css)

Atas ialah kandungan terperinci Cara membuat trapezoid bersudut tegak dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!