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:
Un Test simplu in fiecare zi
HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Ce atribut poate fi utilizat pentru a adauga stiluri CSS direct in tag-ul HTML?
type style class<div style="width: 80%; border: 3px solid #888888;">Continut</div>
Care din metodele proprietatii CSS transform distorsioneaza elementul HTML la un anumit unghi (inclusiv continutul lui)?
translate() scale() skew()#un_id {
transform: skew(20deg, 25deg);
-ms-transform: skew(20deg, 25deg); /* IE 9 */
-webkit-transform: skew(20deg, 25deg); /* Safari and Chrome */
}
Clic pe functia care poate converti un obiect Date in Sir.
indexOf() toString() getDate()var rightnow = new Date();
alert( rightnow.toString() );
Care functie aplica o alta functie la elementele unui array?
array_merge() array_search() array_map()$arr = arra("abc", "<p>xyz</p>", "<em>PHP</em>");
// aplica functia strip_tags() ca sa stearga tag-urile HTML din fiecare element din %arr
$arr = array_map("strip_tags", $arr);
}
Cum se spune "sambata" in limba engleza?
Sunday Saturday MondayOn Saturday I visit my grandparents.
- Sambata imi vizitez bunicii.
Cum se spune "sambata" in limba spaniola?
domingo lunes sábadoSábado visito mis abuelos.
- Sambata imi vizitez bunicii.