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
Ce atribut indica faptul ca un camp de formular trebuie completat?
required="required" autofocus="autofocus" placeholder="text"
<input type="text" name="name1" required="required" />
Ce metoda CSS misoreaza sau mareste dimensiunile unui element (inclusiv continutul)?
translate() scale() skew()
#some_id:hover {
  transform: scale(2, 1.5);
  -ms-transform: scale(2, 1.5);    /* IE 9 */
  -moz-transform: scale(2, 1.5);   /* Firefox */
}
Click pe metoda obiectului Date care returneaza ziua din luna.
setDate() getMonth() getDate()
var rightnow = new Date();
var day = rightnow.getDate();
alert(day);
Ce functie este folosita pentru a incarca un fisier pe server?
is_file() move_uploaded_file() fopen()
if(move_uploaded_file($_FILES["field_name"]["tmp_name"], "dir/file_name")) {
  echo "Fisierul a fost incarcat";
}
Cum se spune in engleza expresia: "Ploua cu galeata"?
rain cats and dogs rain buckets quiet rain
In Bucharest it`s raining cats and dogs.
- In Bucuresti ploua cu galeata.
Cum se spune in spaniola expresia: "Ploua cu galeata"?
llover cubo llover a cántaros lluvia tranquila
En Madrid está lloviendo a cántaros.
- In Madrid ploua cu galeata.
Triunghiuri cu CSS

Last accessed pages

  1. Cursuri Limba Rusa (6087)
  2. Gramatica limbii engleze - Prezentare Generala (217962)
  3. Viitor simplu - Exercitii si teste incepatori (12488)
  4. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (278156)
  5. Pronumele personal (9337)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (271)
  2. Curs HTML gratuit Tutoriale HTML5 (187)
  3. Coduri pt culori (151)
  4. Creare si editare pagini HTML (118)
  5. Gramatica limbii engleze - Prezentare Generala (112)