Jak działają Trójkąty CSS?
Jest mnóstwo różnych kształtów CSS na sztuczki CSS-kształty CSS i jestem szczególnie zaskoczony trójkątem:
#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
<div id="triangle-up"></div>
Jak i dlaczego to działa? 18 answers
Trójkąty CSS: tragedia w pięciu aktach
Jak powiedział alex , granice o równej szerokości przylegają do siebie pod kątem 45 stopni:
Gdy nie masz górnej granicy, wygląda to tak:
Następnie dajesz mu Szerokość 0...
...i wysokości 0...
...i na koniec tworzysz przezroczyste obramowania:
To daje Trójkąt.Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-04-06 15:35:50
Obramowania wykorzystują kątową krawędź, gdzie się przecinają(kąt 45° przy równej szerokości obramowania, ale zmiana szerokości obramowania może przekrzywić kąt).
JsFiddle .
Ukrywając pewne obramowania, możesz uzyskać efekt trójkąta (jak widać powyżej, zmieniając różne części w różne kolory). transparent
jest często używany jako kolor krawędzi do uzyskania kształtu trójkąta.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-08-16 07:04:02
Zacznij od podstawowego kwadratu i granic. Każda obramowanie będzie miało inny kolor, więc możemy je rozróżnić:
.triangle {
border-color: yellow blue red green;
border-style: solid;
border-width: 200px 200px 200px 200px;
height: 0px;
width: 0px;
}
Co daje to :
Ale nie ma potrzeby stosowania górnej granicy, więc ustaw jej szerokość na 0px
. Teraz nasz border-bottom 200px
sprawi, że nasz trójkąt będzie wysoki o 200px.
.triangle {
border-color: yellow blue red green;
border-style: solid;
border-width: 0px 200px 200px 200px;
height: 0px;
width: 0px;
}
I otrzymamy to :
Następnie, aby ukryć dwa boczne Trójkąty, Ustaw kolor obramowania na przezroczysty. Ponieważ górna granica została skutecznie usunięta, możemy również ustawić kolor border-top-color NA przezroczysty.
.triangle {
border-color: transparent transparent red transparent;
border-style: solid;
border-width: 0px 200px 200px 200px;
height: 0px;
width: 0px;
}
W końcu otrzymujemy to :
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-07-23 20:45:25
Inne podejście:
Trójkąty CSS3 z transformatą
Trójkątny kształt jest dość łatwy do wykonania przy użyciu tej techniki. Dla ludzi, którzy wolą zobaczyć animację wyjaśniającą, jak działa ta technika, oto ona:
- Link do animacji : Jak zrobić CSS3 Trójkąt.
- i DEMO : CSS3 made with transform obróć się.
W przeciwnym razie, tutaj jest szczegółowe wyjaśnienie w 4 aktach (nie jest to tragedia) jak zrobić równoramienny trójkąt prostokątny z jednym elementem.
- Uwaga 1: dla trójkątów równoramiennych i fantazyjnych rzeczy można zobaczyć krok 4.
- Uwaga 2: w poniższych fragmentach prefiksy dostawcy nie są uwzględniane. są one zawarte w codepen demos.
-
Uwaga 3: HTML dla następującego wyjaśnienia jest zawsze:
<div class="tr"></div>
Krok 1: zrób div
Easy, just make sure that width = 1.41 x height
. Możesz użyć dowolnej technologii (zobacz tutaj), w tym wykorzystanie procentów i padding-bottom do zachowania proporcji i utworzenia trójkąta responsywnego . Na poniższym obrazku div ma złotą żółtą obwódkę.
W tym div, Wstaw pseudo element i daj mu 100% szerokości i wysokości rodzica. Pseudo element ma niebieski tło na poniższym obrazku.
W tym momencie mamy CSS :
.tr {
width: 30%;
padding-bottom: 21.27%; /* = width / 1.41 */
position: relative;
}
.tr: before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #0079C6;
}
Krok 2: obróćmy
Po pierwsze, najważniejsze: zdefiniuj pochodzenie transformaty. domyślne pochodzenie znajduje się w środku pseudo elementu i potrzebujemy go w lewym dolnym rogu. Poprzez dodanie tego CSS do pseudo elementu:
transform-origin:0 100%;
lub transform-origin: left bottom;
Teraz możemy obrócić pseudo element o 45 stopni zgodnie z ruchem wskazówek zegara z transform : rotate(45deg);
W tym momencie mamy CSS :
.tr {
width: 30%;
padding-bottom: 21.27%; /* = width / 1.41 */
position: relative;
}
.tr:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #0079C6;
transform-origin: 0 100%;
transform: rotate(45deg);
}
Krok 3: Ukryj to
Aby ukryć niechciane części pseudo elementu (wszystko, co przepełnia div żółtą obwódką), wystarczy ustawić overflow:hidden;
na kontenerze. po usunięciu żółtej granicy, otrzymasz... a Trójkąt ! :
CSS:
.tr {
width: 30%;
padding-bottom: 21.27%; /* = width / 1.41 */
position: relative;
overflow: hidden;
}
.tr:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #0079C6;
transform-origin: 0 100%;
transform: rotate(45deg);
}
Krok 4: Przejdź dalej...
Jak pokazano w demo , możesz dostosować Trójkąty:
- uczyń je cieńszymi lub bardziej pochlebnymi, bawiąc się
skewX()
. - ustaw je w lewo, w prawo lub w dowolnym innym kierunku, bawiąc się transformacją i kierunkiem obrotu.
- zrób jakiś refleks z właściwością transformacji 3D.
- podaj granice trójkąta
- umieść obraz wewnątrz trójkąta O wiele więcej... Uwolnij moce CSS3 !
Dlaczego używać tej techniki?
- trójkąt może łatwo reagować.
- możesz utworzyć trójkąt z obramowaniem.
- możesz zachować granice trójkąta. Oznacza to, że możesz wyzwolić stan najazdu lub zdarzenie kliknięcia tylko wtedy, gdy kursor jest wewnątrz trójkąta. To może stać się bardzo przydatne w niektórych sytuacjach, takich jak ten gdzie każdy trójkąt nie można nakładać sąsiadów, więc każdy trójkąt ma swój własny stan zawisu.
- możesz zrobić kilka fantazyjnych efektów, takich jak odbicia.
- pomoże Ci zrozumieć właściwości transformacji 2d i 3d.
Dlaczego nie użyć tej techniki?
- główną wadą jest kompatybilność przeglądarki , właściwości transformacji 2d są obsługiwane przez IE9+ i dlatego nie możesz użyć tej techniki, jeśli planujesz wspierać IE8. Zobacz CanIuse więcej informacji. Dla niektórych fantazyjnych efektów przy użyciu przekształceń 3d, takich jak odbicie obsługa przeglądarki jest IE10+ (zobacz canIuse aby uzyskać więcej informacji).
- nie potrzebujesz niczego responsywnego, a zwykły trójkąt jest dla Ciebie odpowiedni, więc powinieneś wybrać technikę granicy opisaną tutaj: lepszą kompatybilność przeglądarki i łatwiejszą do zrozumienia dzięki amaizującym postom tutaj.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:02:48
Oto animacja w JSFiddle, którą stworzyłem dla demonstracji.
Zobacz także fragment poniżej.
To jest animowany GIF zrobiony z Screencastu [12]}transforms = [
{'border-left-width' :'30', 'margin-left': '70'},
{'border-bottom-width' :'80'},
{'border-right-width' :'30'},
{'border-top-width' :'0', 'margin-top': '70'},
{'width' :'0'},
{'height' :'0', 'margin-top': '120'},
{'borderLeftColor' :'transparent'},
{'borderRightColor' :'transparent'}
];
$('#a').click(function() {$('.border').trigger("click");});
(function($) {
var duration = 1000
$('.border').click(function() {
for ( var i=0; i < transforms.length; i++ ) {
$(this)
.animate(transforms[i], duration)
}
}).end()
}(jQuery))
.border {
margin: 20px 50px;
width: 50px;
height: 50px;
border-width: 50px;
border-style: solid;
border-top-color: green;
border-right-color: yellow;
border-bottom-color: red;
border-left-color: blue;
cursor: pointer
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>
Click it!<br>
<div class="border"></div>
Losowa wersja
/**
* Randomize array element order in-place.
* Using Durstenfeld shuffle algorithm.
*/
function shuffleArray(array) {
for (var i = array.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = array[i];
array[i] = array[j];
array[j] = temp;
}
return array;
}
transforms = [
{'border-left-width' :'30', 'margin-left': '70'},
{'border-bottom-width' :'80'},
{'border-right-width' :'30'},
{'border-top-width' :'0', 'margin-top': '70'},
{'width' :'0'},
{'height' :'0'},
{'borderLeftColor' :'transparent'},
{'borderRightColor' :'transparent'}
];
transforms = shuffleArray(transforms)
$('#a').click(function() {$('.border').trigger("click");});
(function($) {
var duration = 1000
$('.border').click(function() {
for ( var i=0; i < transforms.length; i++ ) {
$(this)
.animate(transforms[i], duration)
}
}).end()
}(jQuery))
.border {
margin: 50px;
width: 50px;
height: 50px;
border-width: 50px;
border-style: solid;
border-top-color: green;
border-right-color: yellow;
border-bottom-color: red;
border-left-color: blue;
cursor: pointer
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>
Click it!<br>
<div class="border"></div>
All at once version
$('#a').click(function() {$('.border').trigger("click");});
(function($) {
var duration = 1000
$('.border').click(function() {
$(this)
.animate({'border-top-width': 0 ,
'border-left-width': 30 ,
'border-right-width': 30 ,
'border-bottom-width': 80 ,
'width': 0 ,
'height': 0 ,
'margin-left': 100,
'margin-top': 150,
'borderTopColor': 'transparent',
'borderRightColor': 'transparent',
'borderLeftColor': 'transparent'}, duration)
}).end()
}(jQuery))
.border {
margin: 50px;
width: 50px;
height: 50px;
border-width: 50px;
border-style: solid;
border-top-color: green;
border-right-color: yellow;
border-bottom-color: red;
border-left-color: blue;
cursor: pointer
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>
Click it!<br>
<div class="border"></div>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-07-14 10:50:37
Powiedzmy, że mamy następujący div:
<div id="triangle" />
Teraz Edytuj CSS krok po kroku, aby uzyskać jasny obraz tego, co dzieje się wokół
Krok 1: Jsfiddle Link:
#triangle {
background: purple;
width :150px;
height:150PX;
border-left: 50px solid black ;
border-right: 50px solid black;
border-bottom: 50px solid black;
border-top: 50px solid black;
}
To jest prosty div. Z bardzo prostym CSS. Żeby laik mógł to zrozumieć. Div ma wymiary 150 x 150 pikseli z obramowaniem 50 pikseli. Obraz jest dołączony:
Krok 2: Jsfiddle Link:
#triangle {
background: purple;
width :150px;
height:150PX;
border-left: 50px solid yellow ;
border-right: 50px solid green;
border-bottom: 50px solid red;
border-top: 50px solid blue;
}
Teraz właśnie zmieniłem obramowanie-kolor wszystkich 4 stron. Obraz jest załączony.
Krok:3 Jsfiddle Link:
#triangle {
background: purple;
width :0;
height:0;
border-left: 50px solid yellow ;
border-right: 50px solid green;
border-bottom: 50px solid red;
border-top: 50px solid blue;
}
Teraz właśnie zmieniłem wysokość i szerokość div z 150 pikseli na zero. Obraz jest dołączony
KROK 4: JSfiddle:
#triangle {
background: purple;
width :0px;
height:0px;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid red;
border-top: 50px solid transparent;
}
Teraz zrobiłem wszystkie granice przezroczyste z wyjątkiem dolnej granicy. Obraz jest załączony poniżej.
Krok 5: JSfiddle Link:
#triangle {
background: white;
width :0px;
height:0px;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid red;
border-top: 50px solid transparent;
}
Teraz zmieniłem kolor tła na biały. Obraz jest załączony.
Stąd mamy trójkąt, którego potrzebowaliśmy.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-07-03 23:37:34
A teraz coś zupełnie innego...
Zamiast używać sztuczek css nie zapomnij o rozwiązaniach tak prostych jak encje html:
▲
Wynik:
▲
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:34:54
Rozważmy poniższy trójkąt
.triangle {
border-bottom:15px solid #000;
border-left:10px solid transparent;
border-right:10px solid transparent;
width:0;
height:0;
}
Oto co otrzymujemy:
Dlaczego wyszedł w takim kształcie? Poniższy schemat wyjaśnia wymiary, zauważ, że 15px zostało użyte dla dolnej granicy, a 10px zostało użyte dla lewej i prawej.Dość łatwo jest utworzyć trójkąt prostokątny również poprzez usunięcie prawej krawędzi.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-07-23 21:02:13
Idąc o krok dalej, używając css opartego na tym dodałem strzałki na plecach i następne przyciski(tak Wiem, że nie jest to 100% cross-browser, ale slick niemniej).
.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
margin:20px auto;
}
.triangle-down {
border-bottom:none;
border-top: 100px solid red;
}
.triangle-left {
border-left:none;
border-right: 100px solid red;
border-bottom: 50px solid transparent;
border-top: 50px solid transparent;
}
.triangle-right {
border-right:none;
border-left: 100px solid red;
border-bottom: 50px solid transparent;
border-top: 50px solid transparent;
}
.triangle-after:after {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid red;
margin:0 5px;
content:"";
display:inline-block;
}
.triangle-after-right:after {
border-right:none;
border-left: 5px solid blue;
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
}
.triangle-before:before {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid blue;
margin:0 5px;
content:"";
display:inline-block;
}
.triangle-before-left:before {
border-left:none;
border-right: 5px solid blue;
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
}
<div class="triangle"></div>
<div class="triangle triangle-down"></div>
<div class="triangle triangle-left"></div>
<div class="triangle triangle-right"></div>
<a class="triangle-before triangle-before-left" href="#">Back</a>
<a class="triangle-after triangle-after-right" href="#">Next</a>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-09-05 12:33:22
Inne podejście. Z gradientem liniowym (dla IE, TYLKO IE 10+). Można użyć dowolnego kąta:
.triangle {
margin: 50px auto;
width: 100px;
height: 100px;
/* linear gradient */
background: -moz-linear-gradient(-45deg, rgba(255,0,0,0) 0%, rgba(255,0,0,0) 50%, rgba(255,0,0,1) 50%, rgba(255,0,0,1) 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,0,0,0)), color-stop(50%,rgba(255,0,0,0)), color-stop(50%,rgba(255,0,0,1)), color-stop(100%,rgba(255,0,0,1)));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, rgba(255,0,0,0) 0%,rgba(255,0,0,0) 50%,rgba(255,0,0,1) 50%,rgba(255,0,0,1) 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, rgba(255,0,0,0) 0%,rgba(255,0,0,0) 50%,rgba(255,0,0,1) 50%,rgba(255,0,0,1) 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, rgba(255,0,0,0) 0%,rgba(255,0,0,0) 50%,rgba(255,0,0,1) 50%,rgba(255,0,0,1) 100%);
/* IE10+ */
background: linear-gradient(135deg, rgba(255,0,0,0) 0%,rgba(255,0,0,0) 50%,rgba(255,0,0,1) 50%,rgba(255,0,0,1) 100%);
/* W3C */;
}
<div class="triangle"></div>
Oto jsfiddle
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-09-25 20:39:08
Ok, ten trójkąt zostanie utworzony ze względu na sposób, w jaki granice elementów współpracują ze sobą w HTML i CSS...
Ponieważ zwykle używamy obramowań 1 lub 2px, nigdy nie zauważamy, że obramowania tworzą kąty 45° względem siebie o tej samej szerokości i jeśli szerokość się zmieni, stopień kąta również się zmieni, Uruchom kod CSS, który stworzyłem poniżej:
.triangle {
width: 100px;
height: 100px;
border-left: 50px solid black;
border-right: 50px solid black;
border-bottom: 100px solid red;
}
<div class="triangle">
</div>
Następnie w następnym kroku, nie mamy żadnej szerokości ani wysokości, coś w rodzaju to:
.triangle {
width: 0;
height: 0;
border-left: 50px solid black;
border-right: 50px solid black;
border-bottom: 100px solid red;
}
<div class="triangle">
</div>
I teraz sprawiamy, że lewa i prawa krawędź są niewidoczne, aby uczynić nasz pożądany Trójkąt jak poniżej: {]}
.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
<div class="triangle"></div>
Jeśli nie chcesz uruchomić fragmentu, aby zobaczyć kroki, stworzyłem sekwencję obrazów, aby spojrzeć na wszystkie kroki w jednym obrazie:
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-04-09 11:55:53
To stare pytanie, ale myślę, że warto podzielić się tym, jak stworzyć strzałkę za pomocą tej techniki trójkąta.
Krok 1:
Stwórzmy 2 Trójkąty, dla drugiego użyjemy pseudo klasy :after
i umieścimy ją tuż pod drugą:
.arrow{
width: 0;
height: 0;
border-radius: 50px;
display: inline-block;
position: relative;
}
.arrow:after{
content: "";
width: 0;
height: 0;
position: absolute;
}
.arrow-up{
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid #333;
}
.arrow-up:after{
top: 5px;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid #ccc;
right: -50px;
}
<div class="arrow arrow-up"> </div>
Krok 2
Teraz musimy tylko ustawić dominujący kolor obramowania drugiego trójkąta na ten sam kolor tło:
.arrow{
width: 0;
height: 0;
border-radius: 50px;
display: inline-block;
position: relative;
}
.arrow:after{
content: "";
width: 0;
height: 0;
position: absolute;
}
.arrow-up{
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid #333;
}
.arrow-up:after{
top: 5px;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid #fff;
right: -50px;
}
<div class="arrow arrow-up"> </div>
Fiddle with all the arrows:
http://jsfiddle.net/tomsarduy/r0zksgeu/
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-07-31 20:42:55
CSS clip-path
To jest coś, co czuję, że to pytanie przeoczyło; clip-path
clip-path
w skrócieObcinanie, z właściwością
clip-path
, jest podobne do wycinania kształtu (jak koło lub pentagon) z prostokątnej kartki papieru. Właściwość należy do specyfikacji " CSS Masking Module Level 1 ". Specyfikacja mówi: "maskowanie CSS zapewnia dwa sposoby częściowego lub całkowitego ukrywania części elementów wizualnych: maskowanie i wycinanie".
clip-path
użyje samego elementu, a nie jego obramowania, aby wyciąć kształt określony w jego parametrach. Wykorzystuje super prosty system koordynacji oparty na procentach, który sprawia, że edycja jest bardzo łatwa i oznacza, że możesz ją podnieść i stworzyć dziwne i wspaniałe kształty w ciągu kilku minut.
Kształt Trójkąta Przykład
div {
-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
background: red;
width: 100px;
height: 100px;
}
<div></div>
Minus
Ma w tej chwili poważną minusę, jedną z nich jest poważny brak wsparcia, tylko tak naprawdę jest objęty w -webkit-
przeglądarkach i nie ma wsparcia na IE i tylko bardzo częściowy w Firefoksie.
Zasoby
Oto kilka przydatnych zasobów i materiałów, które pomogą lepiej zrozumieć clip-path
, a także zacząć tworzyć własne.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-03-09 16:10:59
Sass (SCSS) triangle mixin
Napisałem to, aby ułatwić (i osuszyć) automatyczne generowanie trójkąta CSS:
// Triangle helper mixin (by Yair Even-Or)
// @param {Direction} $direction - either `top`, `right`, `bottom` or `left`
// @param {Color} $color [currentcolor] - Triangle color
// @param {Length} $size [1em] - Triangle size
@mixin triangle($direction, $color: currentcolor, $size: 1em) {
$size: $size/2;
$transparent: rgba($color, 0);
$opposite: (top:bottom, right:left, left:right, bottom:top);
content: '';
display: inline-block;
width: 0;
height: 0;
border: $size solid $transparent;
border-#{map-get($opposite, $direction)}-color: $color;
margin-#{$direction}: -$size;
}
Przykład użycia:
span {
@include triangle(bottom, red, 10px);
}
Strona placu zabaw
Ważna uwaga:
jeśli trójkąt wydaje się pikselowany w niektórych przeglądarkach, spróbuj jednej z metod opisanych tutaj .
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-05-28 14:35:46
I made a sample in enjoycss
Możesz się nim pobawić i zobaczyć jak to się zmienia;)
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-01-12 15:40:37
Prawie wszystkie odpowiedzi skupiają się na trójkącie zbudowanym przy użyciu border, więc zamierzam opracować metodę linear-gradient
(tak jak zaczęła się w odpowiedzi @ lima_fil).
Użycie wartości stopnia jak 45°
zmusi nas do przestrzegania określonego stosunku height/width
w celu uzyskania trójkąta, który chcemy, a to nie będzie responsywne:
.tri {
width:100px;
height:100px;
background:linear-gradient(45deg, transparent 50%,red 0);
/*To illustrate*/
border:1px solid;
}
Good one
<div class="tri"></div>
bad one
<div class="tri" style="width:150px"></div>
bad one
<div class="tri" style="height:30px"></div>
Zamiast tego powinniśmy wziąć pod uwagę predefiniowane wartości kierunku, takie jak to bottom
, to top
, itd. W tym przypadku możemy uzyskać dowolny kształt trójkąta, zachowując jego responsywność.
1) trójkąt prostokątny
Aby otrzymać taki trójkąt potrzebujemy jednego gradientu liniowego i kierunku ukośnego jak to bottom right
, to top left
, to bottom left
, etc
.tri-1,.tri-2 {
display:inline-block;
width:100px;
height:100px;
background:linear-gradient(to bottom left, transparent 50%,red 0);
border:1px solid;
animation:change 2s linear infinite alternate;
}
.tri-2 {
background:linear-gradient(to top right, transparent 50%,red 0);
border:none;
}
@keyframes change {
from {
width:100px;
height:100px;
}
to {
height:50px;
width:180px;
}
}
<div class="tri-1"></div>
<div class="tri-2"></div>
2) trójkąt równoramienny
Do tego potrzebujemy 2 gradientów liniowych jak powyżej i każdy z nich zajmie połowę szerokości (lub wysokości). To tak, jakbyśmy tworzyli lustrzane odbicie pierwszego Trójkąt.
.tri {
display:inline-block;
width:100px;
height:100px;
background-image:
linear-gradient(to bottom right, transparent 50%,red 0),
linear-gradient(to bottom left, transparent 50%,red 0);
background-size:50.9% 100%; /* I use a value slightly bigger than 50% to avoid having a small gap between both gradient*/
background-position:left,right;
background-repeat:no-repeat;
animation:change 2s linear infinite alternate;
}
@keyframes change {
from {
width:100px;
height:100px;
}
to {
height:50px;
width:180px;
}
}
<div class="tri"></div>
3) trójkąt równoboczny
Ten jest nieco trudny w obsłudze, ponieważ musimy zachować zależność między wysokością i szerokością gradientu. Będziemy mieli ten sam trójkąt, co powyżej, ale uczynimy obliczenia bardziej złożonymi, aby przekształcić trójkąt równoramienny w równoboczny.
Aby ułatwić, weźmiemy pod uwagę, że szerokość naszego div jest znana, a wysokość jest wystarczająco duża, aby móc narysuj nasz Trójkąt (height >= width
).
Mamy nasze dwa gradienty g1
i g2
, Niebieska linia jest szerokością div
w
i każdy gradient będzie miał 50% (w/2
) i każdy bok trójkąta będzie równy w
. Zielona linia jest wysokością obu gradientów hg
i możemy łatwo uzyskać wzór poniżej:
(w/2)² + hg² = w²
---> hg = (sqrt(3)/2) * w
---> hg = 0.866 * w
Więc musimy polegać na cacl()
aby wykonać nasze obliczenia i uzyskać potrzebny wynik:
.tri {
--w:100px;
width:var(--w);
height:100px;
display:inline-block;
background-image:
linear-gradient(to bottom right, transparent 50%,red 0),
linear-gradient(to bottom left, transparent 50%,red 0);
background-size:calc(var(--w)/2 + 0.5%) calc(0.866 * var(--w));
background-position:
left bottom,right bottom;
background-repeat:no-repeat;
}
<div class="tri"></div>
<div class="tri" style="--w:80px"></div>
<div class="tri" style="--w:50px"></div>
4) Trójkąt losowy
Aby otrzymać losowy trójkąt, jest to proste, ponieważ po prostu musimy usunąć warunek 50% każdego z nich, ale powinniśmy zachować dwa warunki (oba powinny mieć tę samą wysokość, a suma obu szerokości powinna wynosić 100%).
.tri-1 {
width:100px;
height:100px;
display:inline-block;
background-image:
linear-gradient(to bottom right, transparent 50%,red 0),
linear-gradient(to bottom left, transparent 50%,red 0);
background-size:20% 60%,80% 60%;
background-position:
left bottom,right bottom;
background-repeat:no-repeat;
}
<div class="tri-1"></div>
Ale co jeśli chcemy zdefiniować wartość dla każdej strony? Po prostu musimy wykonać obliczenia jeszcze raz!
Zdefiniujmy hg1
i hg2
jako wysokość naszego gradientu (oba są równe czerwonej linii) następnie wg1
i wg2
jako szerokość naszego gradientu (wg1 + wg2 = a
). Nie będę szczegółowo wyliczał, ale na końcu będziemy mieli:
wg2 = (a²+c²-b²)/(2a)
wg1 = a - wg2
hg1 = hg2 = sqrt(b² - wg1²) = sqrt(c² - wg2²)
Teraz osiągnęliśmy limit CSS, ponieważ nawet z calc()
nie będziemy w stanie tego zaimplementować, więc po prostu musimy zebrać końcowy wynik ręcznie i użyć ich jako naprawionych Rozmiar:
.tri {
--wg1: 20px;
--wg2: 60px;
--hg:30px;
width:calc(var(--wg1) + var(--wg2));
height:100px;
display:inline-block;
background-image:
linear-gradient(to bottom right, transparent 50%,red 0),
linear-gradient(to bottom left, transparent 50%,red 0);
background-size:var(--wg1) var(--hg),var(--wg2) var(--hg);
background-position:
left bottom,right bottom;
background-repeat:no-repeat;
}
<div class="tri" ></div>
<div class="tri" style="--wg1:80px;--wg2:60px;--hg:100px;" ></div>
Bonus
Nie powinniśmy zapominać, że możemy również zastosować obrót i/lub pochylenie i mamy więcej opcji, aby uzyskać więcej trójkąta:
.tri {
--wg1: 20px;
--wg2: 60px;
--hg:30px;
width:calc(var(--wg1) + var(--wg2));
height:100px;
display:inline-block;
background-image:
linear-gradient(to bottom right, transparent 50%,red 0),
linear-gradient(to bottom left, transparent 50%,red 0);
background-size:var(--wg1) var(--hg),var(--wg2) var(--hg);
background-position:
left bottom,right bottom;
background-repeat:no-repeat;
}
<div class="tri" ></div>
<div class="tri" style="transform:skewY(25deg)"></div>
<div class="tri" style="--wg1:80px;--wg2:60px;--hg:100px;" ></div>
<div class="tri" style="--wg1:80px;--wg2:60px;--hg:100px;transform:rotate(20deg)" ></div>
Oczywiście należy pamiętać o rozwiązaniu SVG , które może być bardziej odpowiednie w niektórych sytuacjach:
svg {
width:100px;
height:100px;
}
polygon {
fill:red;
}
<svg viewBox="0 0 100 100"><polygon points="0,100 0,0 100,100" /></svg>
<svg viewBox="0 0 100 100"><polygon points="0,100 50,0 100,100" /></svg>
<svg viewBox="0 0 100 100"><polygon points="0,100 50,23 100,100" /></svg>
<svg viewBox="0 0 100 100"><polygon points="20,60 50,43 80,100" /></svg>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-10-08 21:33:15
Oto kolejne skrzypce:
.container:after {
position: absolute;
right: 0;
content: "";
margin-right:-50px;
margin-bottom: -8px;
border-width: 25px;
border-style: solid;
border-color: transparent transparent transparent #000;
width: 0;
height: 0;
z-index: 10;
-webkit-transition: visibility 50ms ease-in-out,opacity 50ms ease-in-out;
transition: visibility 50ms ease-in-out,opacity 50ms ease-in-out;
bottom: 21px;
}
.container {
float: left;
margin-top: 100px;
position: relative;
width: 150px;
height: 80px;
background-color: #000;
}
.containerRed {
float: left;
margin-top: 100px;
position: relative;
width: 100px;
height: 80px;
background-color: red;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-03-06 16:54:03
Inni już to dobrze wyjaśnili. Pozwól, że dam ci animację, która wyjaśni to szybko: http://codepen.io/chriscoyier/pen/lotjh
Oto kod do zabawy i nauki pojęć.
HTML:
<html>
<body>
<div id="border-demo">
</div>
</body>
</html>
CSS:
/*border-width is border thickness*/
#border-demo {
background: gray;
border-color: yellow blue red green;/*top right bottom left*/
border-style: solid;
border-width: 25px 25px 25px 25px;/*top right bottom left*/
height: 50px;
width: 50px;
}
Pobaw się tym i zobacz, co się stanie. Ustaw wysokość i szerokość na zero. Następnie usuń górną ramkę i zrób przezroczystą lewą i prawą stronę lub po prostu spójrz na poniższy kod, aby utworzyć css Trójkąt:
#border-demo {
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid blue;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-12-14 02:05:23