CSS háromszög

Szerző:   |   2014-08-09

Tudtátok, hogy CSS-el bármilyen méretű és formájú háromszög megrajzolható? Alig néhány sornyi kód, ráadásul cross browser megoldás.

A működő kódot ide kattintva tudod megnézni.

Videó

Videó

HTML forráskód


<div class="arrow down"></div>
<div class="arrow up"></div>
<div class="arrow left"></div>
<div class="arrow right"></div>

CSS forráskód


.arrow {
	display: inline-block;
	width: 0;
	height: 0
}
.arrow.up {
	border-bottom: 10px solid #000;
	border-right: 10px solid transparent;
	border-left: 10px solid transparent
}
.arrow.down {
	border-top: 10px solid #000;
	border-right: 10px solid transparent;
	border-left: 10px solid transparent
}
.arrow.left {
	border-right: 10px solid #000;
	border-bottom: 10px solid transparent;
	border-top: 10px solid transparent
}
.arrow.right {
	border-left: 10px solid #000;
	border-bottom: 10px solid transparent;
	border-top: 10px solid transparent
}

1 hozzászólás

  1. 2014. augusztus 9. szombat - 20:13

    Nagyon szépen köszönöm!

Hozzászólás

Keresés a blogon
Kategóriák
Legújabb hozzászólások
  • A villanyszerelés örömei panelben

    Sokat segitettel egy abszolut hozzanemertonek! Koszonom...

  • Névjegykártya tervezés Illustratorban

    Nem, mert megmondod, hogy kétoldalas nyomtatást kérsz. A nyomda nem csinál semmit amíg minden pontosan le nincs egyeztetve....

  • Névjegykártya tervezés Illustratorban

    Szia! Ha csinálok 2 ardboardot, egyikre a kártya elejét, a másikra a hátulját csinálom meg, és elmentem őket egy nyomdakész kétoldalas PDF-be, azt tud...

  • A villanyszerelés örömei panelben

    Mi is panelben szeretnénk az elektromos hálózatot cserélni, felújítani. Sokat segítettél, köszönjük. Üdv. József...

  • A villanyszerelés örömei panelben

    Nem mert, ez már 3 vezeték jön be, fázis-nulla-föld, tehát már az óránál szétválasztották a PEN vezetéket PE-re és N-re vagy más módon, de külön vezet...

  • Az Axure használata

    Ertem, koszonom!...

  • Az Axure használata

    Magyarországon nem szokása a cégeknek kiírni a fizetést az álláshirdetésekben, hanem neked kell fizetési igényt megjelölni az önéletrajzodban. Ha tége...

  • Az Axure használata

    Értem. Köszi a választ megint. És egyébként általában az ilyen munkahelyek mennyit adnak kezdö fizetésnek? Csak mert sehol sem irnak konkrétat, csak a...

  • Az Axure használata

    A munkáltató biztosítja számodra a munkavégzéshez szükséges hardvereket és szoftvereket. Ha nem így van, akkor annál a cégnél nem szabad dolgozni....

  • Az Axure használata

    Köszi a választ! Annyit szeretnék még kérdezni, hogy ha olyan a munkahely hogy adobe szoftverekkel kell dolgozni mondjuk a saját gépemröl, akkor nekem...

  • Az Axure használata

    Próbafeladatot szoktak adni amit meg kell oldanod. Jobb esetben otthon, de nem egy olyan interjún voltam már, ahol leültettek egy géphez aztán ott hel...

  • Az Axure használata

    Hali. Azt szeretném kérdezni, hogy te mit tanácsolsz egy pályakezdö webdesignernek, ha el akar helyezkedni? Még nem dolgoztam korábban sosem webdesign...