cari

Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk menulis kod segi tiga dalam css

Bagaimana untuk menulis kod segi tiga dalam css

WBOY
WBOYasal
2021-12-10 11:58:186001semak imbas

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.

Bagaimana untuk menulis kod segi tiga dalam css

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:

Bagaimana untuk menulis kod segi tiga dalam css

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!

html5 css css3 border
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Bagaimana untuk mengalih keluar warna sempadan dalaman jadual dalam cssArtikel seterusnya：Bagaimana untuk mengalih keluar warna sempadan dalaman jadual dalam css

Artikel berkaitan

Lihat lagi