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 tag se foloseste pentru a crea o caseta de adaugare text?
<form> <input> <div>
<input type="text" name="a_name" value="val" />
Ce proprietate CSS se foloseste pentru a afisa textul cu majuscule-mici?
display font-variant font-style
h3 {
  font-variant: small-caps;
}
Ce instructiune afiseaza o fereastra cu un mesaj in ea?
for() Date() alert()
var msg = "Viziteaza CoursesWeb.net";
alert(msg);
Indicati codul PHP prin care se obtine IP-ul utilizatorului.
$_SERVER["HTTP_USER_AGENT"] $_SERVER["REMOTE_ADDR"] $_GET[]
$ip = $_SERVER["REMOTE_ADDR"];
echo $ip;
Cum se traduce cuvantul "actually"?
actual de fapt acum
He actually came on time.
- De fapt, el a venit la timp.
Cum se traduce expresia: "Hace buen tiempo"?
Face timp E vreme frumoasa Drum bun
Hoy hace buen tiempo.
- Astazi e vreme frumoasa.
Triunghiuri cu CSS

Last accessed pages

  1. Subjunctiv - Verbe neregulate (2132)
  2. Alphabet and Pronunciation - Alfabetul si pronuntia in limba engleza (60857)
  3. HTM5 canvas (4206)
  4. De lo espiritual en EspaƱol - Din cele Spirituale in Spaniola (766)
  5. Limba spaniola curs online incepatori si avansati (31294)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (735)
  2. Curs HTML gratuit Tutoriale HTML5 (399)
  3. Coduri pt culori (369)
  4. Gramatica limbii engleze - Prezentare Generala (350)
  5. Exercitii engleza - English Tests and exercises - Grammar (333)