Kaedah penulisan: 1. Gunakan pernyataan "border: length value solid transparent" untuk menetapkan sempadan elemen div dengan lebar dan tinggi 0 kepada lutsinar 2. Gunakan "border-top: height nilai penyataan nilai warna pepejal" untuk ditetapkan Apabila sempadan atas sempadan telus elemen div dipaparkan, segi tiga yang lebih rendah dipaparkan.
Persekitaran pengendalian tutorial ini: sistem Windows 10, versi CSS3&&HTML5, komputer Dell G3.
Cara menulis kod segi tiga bawah css
Dalam css, kita boleh mencipta gaya sempadan melalui atribut sempadan untuk melaksanakan segi tiga bawah.
Mula-mula kita memerlukan elemen div dengan lebar dan ketinggian 0, kemudian gunakan atribut sempadan untuk menetapkan gaya sempadan div, tetapkan nilai ketebalan sempadan kepada separuh panjang segitiga bawah, dan tetapkan warna sempadan kepada warna telus.
Akhir sekali, gunakan atribut atas sempadan untuk memaparkan sempadan atas elemen div.
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>
<style>
div{
width: 0;
height: 0;
border: 100px solid transparent;
border-top: 100px solid red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>Hasil keluaran:
Jika anda berminat, anda boleh terus melawat: Tutorial video css.
Atas ialah kandungan terperinci Bagaimana untuk menulis kod segi tiga dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
