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