CSS háromszög

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

    Gratulálok! Szép leírás! Azt szeretném kérdezni, hogy nálam 3×32 amper lessz, bővítés után. Laikusként kérdem, így három Fi-relé kell? És mekkorát, é...

  • A villanyszerelés örömei panelben

    @Utolsó hozzászóló: Szia, olyan nincs, hogy 3 fázis érkezik be 3 külön vezetéken. Vagy 1 fázis 1, vagy 3 fázis 3 vezetéken. (+ a nulla) Ha az óráná...

  • A Pico CMS

    pico-release-v2.1.0, nincs benne content-samle, a content üres, nincs benne php nincs sub mappa és fájl sem, mégis ott van a subindex a menunuben...

  • CSS transition

    Köszönöm a válaszod! Igen ezzel már, próbálkoztam, de amint sikrül térben elhelyezni a megfelelő helyre a köröket, megszűnik működni rajtuk az effek...

  • CSS transition

    z-index-et állíts be a menüre, és arra is ami most fölé kerül. Értelemszerűen a menün legyen a magasabb érték....

  • CSS transition

    Kedves Tamás! Remélem még aktív a blog és tudsz nekem segíteni. Nagyon tetszett a videód, ki is próbáltam. A videód alapján beépitettem ezeket az ...

  • A villanyszerelés örömei panelben

    Egy fázis jön be három vezetéken keresztül. Az óránál egy darab megszakító van csak. Ezért kérdeztem, hogy milyen fi relét javasoltok?...

  • A villanyszerelés örömei panelben

    Ez nem igaz, mert az óránál ott a 3 biztosító darabja 20 A...

  • A shape-outside CSS property

    Olyasmit találtam hogy a szöveg részt 2 részre osztjuk bal és jobb......

  • Responsive menü

    Itt a működő kód, innen másold ki: https://cyrex.hu/uploads/2014/08/responsive-menu/...

  • Responsive menü

    Szia. A kódok alapján, meg persze a videót végignézve megcsináltam a menüt. Sajnos nem úgy működik, ahogy kellene. A menü3 almenüi nem gördülnek le, ...

  • A shape-outside CSS property

    Szerintem azt sehogy....