Tworzenie responsywnych trójkątów za pomocą CSS

Question

Próbowałem utworzyć trójkąty w CSS na responsywną stronę i nie mogłem znaleźć dobrego przykładu na stackoverflow, więc oto jak to zrobiłem.

Answer 1

Tworzenie wrażliwych kształtów kątowych jest trochę trudne, ponieważ nie można używać wartości procentowych jako wartości border w swoim CSS, więc napisałem kilka funkcji do obliczenia szerokości strony i odpowiednio zmieniania rozmiarów trójkąta. Pierwszy oblicza rozmiar podczas ładowania strony, drugi przelicza rozmiar wraz ze zmianą szerokości strony.

CSS:

.triangle { 
    width: 0; 
    height: 0; 
    border-top: 50px solid rgba(255, 255, 0, 1); 
    border-right: 100px solid transparent; 
} 

HTML:

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

JS:

$(document).ready(function() { 
    var windowWidth = $(window).width(); 
    $(".triangle").css({ 
     "border-top": windowWidth/2 + 'px solid rgba(255, 255, 0, 1)' 
    }); 
    $(".triangle").css({ 
     "border-right": windowWidth/1.5 + 'px solid transparent' 
    }); 
}); 

$(window).resize(function() { 
    var windowWidthR = $(window).width(); 
    $(".triangle").css({ 
     "border-top": windowWidthR/2 + 'px solid rgba(255, 255, 0, 1)' 
    }); 
    $(".triangle").css({ 
     "border-right": windowWidthR/1.5 + 'px solid transparent' 
    }); 
}); 

Oto jsFiddle - http://jsfiddle.net/craigcannon/58dVS/17/

Answer 2

Można osiągnąć to samo za pomocą prostych CSS

Aby to czuły go używać w zapytaniach mediów ..

Spróbuj następującą JsFiddle

http://jsfiddle.net/arunberti/52grj/

.triangle { 
    width: 0; 
    height: 0; 
    border-top: 50px solid rgba(255%, 204%, 0%, 1); 
    border-right: 100px solid transparent; 
} 

Answer 3

Reponsive trójkąty można osiągnąć tylko z CSS, korzystając z wyściółką oblicza w stosunku do szerokości rodzica, aby objąć duży trójkąt o stałej szerokości. Aby utworzyć trójkąt up-wskazującego ze 100% szerokość:

.triangle-up { 
    width: 50%; 
    height: 0; 
    padding-left:50%; 
    padding-bottom: 50%; 
    overflow: hidden; 
} 
.triangle-up div { 
    width: 0; 
    height: 0; 
    margin-left:-500px; 
    border-left: 500px solid transparent; 
    border-right: 500px solid transparent; 
    border-bottom: 500px solid green; 
} 

lub używając pseudoelements i tylko jeden div:

.triangle-up { 
    width: 50%; 
    height: 0;  
    padding-left:50%; 
    padding-bottom: 50%; 
    overflow: hidden; 
} 
.triangle-up:after { 
    content: ""; 
    display: block; 
    width: 0; 
    height: 0; 
    margin-left:-500px; 
    border-left: 500px solid transparent; 
    border-right: 500px solid transparent; 
    border-bottom: 500px solid #959595; 
} 

Here's a fiddle. Aby uzyskać pełne wyjaśnienie, jak działają te elementy, oraz w lewym i prawym fragmencie trójkąta wskazującego pozycję zobacz mój artykuł na temat Pure CSS responsive triangles. Podany CSS jest dla trójkąta o stosunku wysokości do podstawy równym 2. Próbując zmienić proporcje trójkąta nie wiedząc, jak te trójkąty mogą być skomplikowane, fałszywa reakcja.