Rumah >hujung hadapan web >tutorial css >Cara membuat trapezoid bersudut tegak dalam css
Cara membuat trapezoid bersudut tegak dalam css
- WBOYasal
- 2021-12-03 17:09:188242semak imbas
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}".
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='ti'><div>
<style>
.ti {
height:100px;
width:100px;
border:0px solid transparent;
border-top:60px solid #000;
}
</style>
</body>
</html>Hasil keluaran:
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='ti'><div>
<style>
.ti {
height:100px;
width:100px;
border:0px solid transparent;
border-top:60px solid #000;
border-left:50px solid transparent;
}
</style>
</body>
</html>Hasil keluaran:
( 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!