Bagaimana untuk mencapai kesan sempadan segi tiga dalam css3-tutorial css-php.cn

Bagaimana untuk mencapai kesan sempadan segi tiga dalam css3

WBOY

Lepaskan： 2021-12-16 10:33:21

asal

6687 orang telah melayarinya

Kaedah: 1. Gunakan pernyataan "sempadan: nilai panjang padu lutsinar; atas sempadan: nilai tinggi nilai warna pepejal" untuk menetapkan elemen kosong kepada gaya segi tiga 2. Letakkan elemen segitiga kecil dalam warna yang berbeza Dalam elemen segi tiga besar, anda boleh mencapai kesan segi tiga dengan sempadan.

Bagaimana untuk mencapai kesan sempadan segi tiga dalam css3

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

Bagaimana untuk mencapai kesan segi tiga dengan sempadan dalam css3

Dalam css, jika anda ingin mencapai kesan segitiga dengan sempadan, anda perlu menggunakan atribut sempadan.

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.

Letakkan unsur segi tiga kecil di dalam unsur segi tiga besar dengan warna berbeza untuk mencapai kesan segi tiga dengan sempadan.

Contoh 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>
    <style>
        #demo {
            width: 0;
            height: 0;
            position: relative;
            border-top: solid 50px transparent;
            border-right: solid 50px black;
            /* 黑色大三角形 */
            border-bottom: solid 50px transparent;
        }
 
        #demo:after {
            content: "";
            width: 0;
            height: 0;
            position: absolute;
            left: 3px;
            top: -45px;
            border-top: solid 45px transparent;
            border-right: solid 45px white;
            /* 白色小三角形 */
            border-bottom: solid 45px transparent;
        }
</style>
</head>
<body>
<div id="demo"></div>
</body>
</html>

Salin selepas log masuk

Hasil keluaran:

Bagaimana untuk mencapai kesan sempadan segi tiga dalam css3

(Belajar perkongsian video: tutorial video css )

Atas ialah kandungan terperinci Bagaimana untuk mencapai kesan sempadan segi tiga dalam css3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!