Teknologian jakaminen

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Kun haluat piirtää kolmion CSS3:lla, voit käyttää elementin reunuksen ja läpinäkyvän reunuksen ominaisuuksia saavuttaaksesi tämän. Tässä on yksinkertainen esimerkkikoodi:

.triangle {
    width: 0;
    height: 0;
    border-left: 50px solid transparent; /* 左边框为透明，控制三角形的左斜边 */
    border-right: 50px solid transparent; /* 右边框为透明，控制三角形的右斜边 */
    border-bottom: 100px solid #f00; /* 底边框为实色，控制三角形的底边 */
}

Tässä esimerkissä luomme elementin, jonka leveys on 0 ja korkeus 0, ja asetamme kolme reunaa ohjaamaan kolmion vasenta hypotenuusaa, oikeaa hypotenuusaa ja kantaa. Säätämällä reunuksen leveyttä ja väriä voit piirtää erityyppisiä kolmioita.

Voit käyttää yllä olevaa koodia HTML-elementtiin, esimerkiksi:

 <div class="triangle"></div>

Tämä näyttää sivulle kolmion.