Triunghiuri cu CSS

Curs Css

---

Mai multe triunghiuri cu CSS, create doar cu un tag DIV si cateva proprietati CSS.

Triunghi in sus

Cod:

<style type="text/css">
#triangleup {
 width: 0;
 height: 0;
 border-left: 50px solid transparent;
 border-right: 50px solid transparent;
 border-bottom: 100px solid blue;
}
</style>

<div id="triangleup"><br/><br/><br/>>Sus</div>

Rezultat:

Triunghi in jos

Cod:

<style type="text/css">
#triangledown {
 width: 0;
 height: 0;
 border-left: 50px solid transparent;
 border-right: 50px solid transparent;
 border-top: 100px solid blue;
}
/* Continut in triunghi */
#triangledown div{ margin:-85px 0 0 -20px; }
</style>

<div id="triangledown"><div>JOS</div></div>

Rezultat:

Triunghi stanga

Cod:

<style type="text/css">
#triangleleft {
 width: 0;
 height: 0;
 border-top: 50px solid transparent;
 border-bottom: 50px solid transparent;
 border-right: 100px solid blue;
}
/* Continut in triunghi */
#triangleleft div{ margin:-10px 0 0 25px; }
</style>

<div id="triangleleft"><div>Stanga</div></div>

Rezultat:

Triunghi dreapta

Cod:

<style type="text/css">
#triangleright {
 width: 0;
 height: 0;
 border-top: 50px solid transparent;
 border-bottom: 50px solid transparent;
 border-left: 100px solid blue;
}
/* Continut in triunghi */
#triangleright div{ margin:-10px 0 0 -85px; }
</style>

<div id="triangleright"><div>Dreapta</div></div>

Rezultat:

Triunghi stanga-sus

Cod:

<style type="text/css">
#triangletopleft {
 width: 0;
 height: 0;
 border-top: 100px solid blue;
 border-right: 50px solid transparent;
}
</style>

<div id="triangletopleft">...</div>

Rezultat:

Triunghi dreapta-sus

Cod:

<style type="text/css">
#triangletopright {
 width: 0;
 height: 0;
 border-top: 100px solid blue;
 border-left: 50px solid transparent;
}
</style>

<div id="triangletopright">...</div>

Rezultat:

Triunghi jos-stanga

Cod:

<style type="text/css">
#trianglebottomleft {
 width: 0;
 height: 0;
 border-bottom: 100px solid blue;
 border-right: 50px solid transparent;
}
</style>

<div id="trianglebottomleft">...</div>

Rezultat:

Triunghi jos-dreapta

Cod:

<style type="text/css">
#trianglebottomright {
 width: 0;
 height: 0;
 border-bottom: 100px solid blue;
 border-left: 50px solid transparent;
}
</style>

<div id="trianglebottomright">...</div>

Rezultat:

<p>Cursuri graruite: <mark>MarPlo.net</mark> , jocuri, anime.</p>

a:hover {
  font-weight: bold;
  color: #00da01;
}

var num = 12.34567;
num = num.toFixed(2);
alert(num);       // 12.35

$arr = file("a_file.txt", FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
var_export($arr);

What time is it? It is a quarter to 5.
- Cat este ora? E 5 fara un sfert.

¿Qué hora es? Son las tres menos cuarto.
- Cat este ora? E 3 fara un sfert.