Mérei Tamás webdesigner

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ó

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
}

Mérei Tamás Webdesigner

Szerző

Mérei Tamás vagyok, webdesigner. Reszponzív weboldalak készítésével foglalkozom, grafikai tervezéstől a HTML + CSS kódolásig.

Ismerj meg! Nézd meg eddigi munkáimat! Lépj velem kapcsolatba!

1 hozzászólás

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

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

Hozzászólás

Legújabb hozzászólások