Curs Css

Triunghi in jos Triunghi stanga Triunghi dreapta Triunghi stanga-sus Triunghi dreapta-sus Triunghi jos-stanga Triunghi jos-dreapta

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:



Sus

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:
JOS

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:
Stanga

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:
Dreapta

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:
...

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Clic pe tag-ul care creaza celula in tabel.
<tr> <span> <td>
<table></tr>
  <td>Cell-1</td><td>Cell-2</td>
</tr></table>
Indicati proprietatea CSS care adauga o imagine pentru fundal
background-color background-image color
h3 {
  background-image: url("image.jpg");
}
Ce instructiune se foloseste la parcugerea elementelor unui Array?
for() [) object()
var arr = [1, "ab", "CoursesWeb.net"];
for(var i=0; i< arr.length; i++) { alert(arr[i]); };
Indicati functia PHP utilizata la parcurgerea elementelor unui Array asociativ.
for() foreach() if()
$arr =["k1"=>"v1", "k2"=>"v2", "k3"=>"v3");
foreach($arr AS $k => $v) { echo "<br/>". $k ." - ". $v; }
Care din urmatoarele cuvinte este sinonim cu "gentle" (bland)?
meek good beautiful
He is so kind and meek.
- El este atat de amabil si bland.
Care din urmatoarele cuvinte este sinonim cu "amable" (bland, prietenos)?
hermoso fuerte manso
Tu padre tiene un carácter muy manso.
- Tatal tau are un caracter foarte bland.
Triunghiuri cu CSS

Last accessed pages

  1. Cursuri Limba Germana (6687)
  2. Sa nu ma vad limitat (29)
  3. Formular de contact (1388)
  4. Pacea Ta e cu mine. Sunt in siguranta (76)
  5. Utilizare sesiuni (1482)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (446)
  2. Gramatica limbii spaniole. Indrumator si prezentare generala (348)
  3. Gramatica limbii engleze - Prezentare Generala (172)
  4. Limba spaniola curs online incepatori si avansati (166)
  5. Teste spaniola - Tests y ejercicios de Español - Gramática (159)