Bagaimana untuk melaksanakan segi tiga dalam css

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

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>

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;
}

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

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>

.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;
}

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);
}

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%);
}

dan kemudian jadikan salah satu warna lutsinar:

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

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:

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>

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);
    }
}

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.

◄ : ◄ 
► : ► 
▼ : ▼ 
▲ : ▲
⊿ : ⊿
△ : △

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

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

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

Kesannya masih baik:

(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!