Bagaimana untuk melaksanakan segi tiga dalam css-tutorial css-php.cn

Bagaimana untuk melaksanakan segi tiga dalam css

青灯夜游

Lepaskan： 2021-10-11 17:23:26

asal

25727 orang telah melayarinya

Kaedah pelaksanaan: 1. Gunakan bekas dengan ketinggian dan lebar sifar dan sempadan lutsinar; 3. Gunakan "transform:rotate" dengan "overflow:hidden"; seperti "▼" dan "▲" dilukis.

Bagaimana untuk melaksanakan segi tiga dalam css

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

Gunakan jidar untuk melukis segi tiga

Menggunakan jidar untuk merealisasikan segi tiga harus dikuasai oleh kebanyakan orang, dan ia juga sering dilihat dalam pelbagai aspek Menggunakan Bekas dengan ketinggian dan lebar sifar serta pelaksanaan sempadan yang telus.

Kod ringkas adalah seperti berikut:

<div class=&#39;normal&#39;></div>

Salin selepas log masuk

html, body {
  width: 100%;
  height: 100%;
  display: flex;
}

div {
  width: 0px;
  height: 0px;
  margin: auto;
}

.normal {
  border-top: 50px solid yellowgreen;
  border-bottom: 50px solid deeppink;
  border-left: 50px solid bisque;
  border-right: 50px solid chocolate;
}

Salin selepas log masuk

Bekas dengan ketinggian dan lebar sifar, tetapkan sempadan warna yang berbeza:

Bagaimana untuk melaksanakan segi tiga dalam css

Dengan cara ini, jika warna sempadan mana-mana tiga sisi ialah transparent, adalah sangat mudah untuk mendapatkan segi tiga dengan pelbagai sudut:

<div class=&#39;top&#39;></div>
<div class=&#39;bottom&#39;></div>
<div class=&#39;left&#39;></div>
<div class=&#39;right&#39;></div>

Salin selepas log masuk

.top {
  border: 50px solid transparent;
  border-bottom: 50px solid deeppink;
}

.left {
  border: 50px solid transparent;
  border-right: 50px solid deeppink;
}

.bottom {
  border: 50px solid transparent;
  border-top: 50px solid deeppink;
}

.right {
  border: 50px solid transparent;
  border-bottom: 50px solid deeppink;
}

Salin selepas log masuk

Bagaimana untuk melaksanakan segi tiga dalam css

Gunakan kecerunan linear untuk melukis segitiga

Seterusnya, kami menggunakan kecerunan linearlinear-gradient untuk melaksanakan segi tiga.

Prinsipnya juga sangat mudah Kami melaksanakan kecerunan 45°:

div {
  width: 100px;
  height: 100px;
  background: linear-gradient(45deg, deeppink, yellowgreen);
}

Salin selepas log masuk

Bagaimana untuk melaksanakan segi tiga dalam css

untuk menukar warnanya daripada warna kecerunan kepada dua A. warna tetap:

div {
  width: 100px;
  height: 100px;
  background: linear-gradient(45deg, deeppink, deeppink 50%, yellowgreen 50%, yellowgreen 100%);
}

Salin selepas log masuk

Bagaimana untuk melaksanakan segi tiga dalam css

dan kemudian jadikan salah satu warna lutsinar:

div {
  background: linear-gradient(45deg, deeppink, deeppink 50%, transparent 50%, transparent 100%);
}

Salin selepas log masuk

Bagaimana untuk melaksanakan segi tiga dalam css

transform: putar dengan limpahan: tersembunyi untuk melukis segitiga

Kaedah ini agak konvensional, gunakan transform: rotate dengan overflow: hidden. Anda boleh memahaminya sepintas lalu dan mempelajarinya sebaik sahaja anda mempelajarinya. Gambar rajah animasi ringkas adalah seperti berikut:

Bagaimana untuk melaksanakan segi tiga dalam css

Tetapkan pusat putaran grafik ke bahagian bawah. sudut kiri left bottom dan putarkannya agar sepadan dengan overflow: hidden .

Kod lengkap:

<div class="demo"></div>
<div class="demo-opacity"></div>
<div class="triangle"></div>

Salin selepas log masuk

html, body {
    width: 100%;
    height: 100%;
    display: flex;
}

div {
    width: 141px;
    height: 100px;
    margin: auto;
}

.demo-opacity {
    overflow: hidden;
}

.demo,
.demo-opacity {
    position: relative;
    border: 1px solid #000;
    background: unset;
    
    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        animation: conicmove 3s infinite linear;
        background: deeppink;
        transform-origin: left bottom;
        z-index: -1;
    }
}

.triangle {
    position: relative;
    background: unset;
    overflow: hidden;
    
    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: deeppink;
        transform-origin: left bottom;
        transform: rotate(45deg);
        z-index: -1;
    }
}

@keyframes conicmove {
    100% {
        transform: rotate(45deg);
    }
}

Salin selepas log masuk

Menggunakan aksara untuk melukis segitiga

OK, yang terakhir, agak unik, ialah menggunakan aksara Mewakili segi tiga.

Kod perwakilan Unikod perpuluhan bagi beberapa aksara berbentuk segi tiga disenaraikan di bawah.

◄ : &#9668; 
► : &#9658; 
▼ : &#9660; 
▲ : &#9650;
⊿ : &#8895;
△ : &#9651;

Salin selepas log masuk

Sebagai contoh, kami menggunakan ▼ untuk melaksanakan segi tiga ▼, kodnya adalah seperti berikut:

<div class="normal">&#9660; </div>

Salin selepas log masuk

div {
    font-size: 100px;
    color: deeppink;
}

Salin selepas log masuk

Kesannya masih baik:

1Bagaimana untuk melaksanakan segi tiga dalam css

(Mempelajari perkongsian video: tutorial video css)

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