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
}