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:

<img src="http://coursesweb.net/imgs/webcourses.gif" width="191" height="63" alt="Courses-Web" />

#id {
  display: none;
}

for(var i = 0; i< 8; i++) {
  if(i > 1) break;
  alert(i);
}

define("CONSTANT_NAME", "value");
echo CONSTANT_NAME;

This school has three classes.
- Scoala asta are trei clase.

Escuché dos voces.
- Am auzit doua voci.